如何編程click事件從HTML元素來改變

Question

我會盡力解釋我的問題跟一個例子：

我不知道切換li位置，使他們的行爲像li是已經擺在那裏：

這裏的樣本：

我想點擊在左欄li變化的地方，然後表現得就像任何其他li from right column ....

如果您嘗試點擊返回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

代表的事件，以便新追加要素獲取綁定的事件，當它們被從列移到列：

$('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())) 
    } 
}); 

Answer 2

使用$(document).on()到也考慮到新的有界DOM元素

$(document).on('click', 'ul.my-list-left li' ,function() {});

$(document).ready(function() { 
 
    $(document).on('click', 'ul.my-list-left 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())) 
 
     } 
 
    }); 
 

 
    $(document).on('click', 'ul.my-list-right 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())) 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<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>