Question

这很有用 - 我希望这个问题也与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（），因为只是切换它们不起作用。

Answer 1

用于jquery 1.4使用：

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

取代

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

不推荐使用live（），而on（）是最新版本，但适用于执行此任务的旧版本。

将on（）的使用改为jquery 1.4的live（）

1 个答案: