javascript - 如何以编程方式更改 html 元素的点击事件

Question

我将尝试通过一个示例来解释我的问题:

我想切换li位置并使它们的行为类似于 li那已经在那里了:

这是示例:

我想点击左栏li改变地方，然后像其他人一样行事 li来自右栏....

如果您尝试点击返回 li不会返回到左栏。

请帮忙

$('ul.my-list-left li').on('click',function () {
     var  total =  $('ul.my-list-right li').length;
     
     $('ul.my-list-right li').eq(total-1).after($('ul.my-list-left li').eq( $(this).index())) 
     if(total ===0){
         $('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index())) 
     }
 });

 $('ul.my-list-right li').on('click',function () {
     var  total =  $('ul.my-list-left li').length; 
     
     $('ul.my-list-left li').eq(total-1).after($('ul.my-list-right li').eq( $(this).index())) 
     if(total ===0){
         $('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index())) 
     }
 });

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-1 col-xs-6">
            <div class="well">
                <ul class="my-list my-list-left">
                    <li data-value="1">Left Item 1</li>
                    <li data-value="2">Left Item 2</li>
                    <li data-value="3">Left Item 3</li>
                    <li data-value="4">Left Item 4</li>
                    <li data-value="5">Left Item 5</li>
                </ul>
            </div>
        </div>
        <div class="col-sm-4 col-sm-offset-1 col-xs-6">
            <div class="well">
                <ul class="my-list my-list-right">
                    <li data-value="1">Right Item 1</li>
                    <li data-value="2">Right Item 2</li>
                    <li data-value="3">Right Item 3</li>
                    <li data-value="4">Right Item 4</li>
                    <li data-value="5">Right Item 5</li>
                </ul>
            </div>
        </div>
    </div>
</div>

Answer 1

委托(delegate)事件，以便新附加的元素在从列移动到列时获得事件绑定(bind):

$('ul.my-list-left').on('click', 'li', function () {
     var  total =  $('ul.my-list-right li').length;

     $('ul.my-list-right li').eq(total-1).after($('ul.my-list-left li').eq( $(this).index())) 
     if(total ===0){
         $('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index())) 
     }
 });

 $('ul.my-list-right').on('click', 'li', function () {
     var  total =  $('ul.my-list-left li').length; 

     $('ul.my-list-left li').eq(total-1).after($('ul.my-list-right li').eq( $(this).index())) 
     if(total ===0){
         $('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index())) 
     }
 });