0

这很好用 - 问题是我希望它也与 jquery 1.4 兼容

并且从 on() 切换到 live() 不起作用。

<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() 正常工作，因为只是切换它们不起作用。

4

1 回答 1

0

对于 jquery 1.4 使用：

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

代替

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

live() 已弃用， on() 是最新的，但适用于完成这项工作的旧版本。

于 2013-07-01T21:13:03.793 回答