2013-07-01 13 views
0

這個偉大的工程-the麻煩的是,我想這也是與jQuery 1.4的jQuery改變使用上(),住()1.4

兼容和交換()住()沒」工作。

<script>  
$(document).ready(function(){ 
//right to left 

    $('.rightshtuff').on('click', 'li', function() { 
$(this).addClass('choseright') 
$("ul.rightshtuff li").not(this).removeClass('choseright') 

    }); 

$('.goleft').click(function() { 


$('.left ul').append($("<li></li>").text($('.choseright').text())); 
    $('.choseright').remove(); 
    }); 

//left to right 


    $('.leftshtuff').on('click', 'li', function() { 


$(this).addClass('choseleft') 
$("ul.leftshtuff li").not(this).removeClass('choseleft') 

    }); 

$('.goright').click(function() { 


$('.right ul').append($("<li></li>").text($('.choseleft').text())); 
    $('.choseleft').remove(); 
    }); 


//------- 
});//end ready 

</script> 

的CSS:

<style> 
.choseright{color:#fff;background-color:blue;cursor:pointer;} 
.choseleft{color:#fff;background-color:blue;cursor:pointer;} 
body{color:#525354;font-family:arial} 
.shtuff{padding:0px;margin:0px;} 
ul li {list-style-type:none;padding:0px;} 
.container{width:800px;background-color:##79797A} 
.left ul{padding:0px;margin:0px;} 
.left{padding:10px;border:1px solid;border-color:#727272; width:200px;height:auto;float:left;/*overflow-y:scroll;overflow-x:hidden;*/} 
.left ul li{margin-left:5px;width:100%;padding-left:3px;font-size:14px;} 
.right ul li{padding-left:15px;width:100%;padding-left:3px;font-size:14px;} 

.left li:hover{color:#fff;background-color:blue;cursor:pointer;} 
.right li:hover{color:#fff;background-color:blue;cursor:pointer;} 


.shtuff{margin-top:10px;} 
.right{left:block;padding:10px;border:1px solid;border-color:#727272;float:right;width:200;height:auto;} 

.rightheader, .leftheader{color:#353535;border-bottom:dotted 1px;border-color:#fff;font-size:15px;padding-bottom:5px;margin-bottom:5px; 
border-bottom:1px solid #ccc;} 

.middle{float:left} 
.goleft,.goright{cursor:pointer;} 
</style> 

HTML:

<body> 
<p> 
Click contents to move it to the alternate column! 
</br>If desired buttons can be added to control this -but this is a one click solution :). 
</br><span class="credit">By Evan Loiterman</span> 

</p> 
<div class="container"> 

<div class="left"> 
<span class="leftheader">Selected Items:</span> 
<p> 
<ul class="leftshtuff"> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
</ul> 
</p> 
</div> 

<div class="middle"> 
<span class="goleft"> 
<< 
</span> 
<span class="goright"> 
>> 
</span> 
</span> 

<div class="right"> 
<span class="rightheader">Select from the following:</span> 
<p> 
<ul class="rightshtuff"> 
    <li>blueberry</li> 
    <li>cherry</li> 
    <li>strawberry</li> 
    <li>chocolate</li> 
</ul> 
</p> 
</div> 


</div> 

</body> 

我試圖做的就是這樣的語法:

$( 'leftshtuff')。 on('click','li',function(){

與live()正常工作,因爲只是切換它們不起作用。

+0

看起來你正試圖解決錯誤的問題。 – karthikr

+1

['.delegate()'](http://api.jquery.com/delegate/)在1.4.2中添加 - 嘗試使用它來代替'.live()'。 – Blazemonger

回答

0

的jQuery 1.4用途:

$('.leftshtuff li').live('click', function() { 

代替

$('.leftshtuff').on('click', 'li', function() { 

現場()已被棄用,在()是最新的,但對於舊版本,沒有工作。