Jquery的不與HTML中

Question

首先，我有這個代碼

<ul id="unselected_list"> 
    <li class="clearfix" id="p1"> 
     <img src="img/pic1.jpg" alt="pic1"> 
     <p>name1</p> 
    </li> 
    <li class="clearfix" id="p2"> 
     <img src="img/pic2.jpg" alt="pic2"> 
     <p>name2</p> 
    </li> 
</ul> 

<ul id="selected_list"></ul> 

工作我使用jquery appendTo（）方法插入<li>標籤與此代碼內<ul id="selected_list"></ul>。有效。

$('#unselected_list li').click(function(){ 
    $(this).appendTo('#selected_list'); 
}); 
    <ul id="unselected_list"> 
     <li class="clearfix" id="p2"> 
      <img src="img/pic2.jpg" alt="pic2"> 
      <p>name2</p> 
     </li> 
    </ul> 

    <ul id="selected_list"> 
     <li class="clearfix" id="p1"> 
      <img src="img/pic1.jpg" alt="pic1"> 
      <p>name1</p> 
     </li> 
    </ul> 

但是，當我要點擊<li id="p1">它返回<ul id="unselected_list">，我用這個代碼。它沒有工作。

$('#selected_list li').click(function(){ 
     $(this).appendTo('#unselected_list'); 
    }); 

演示圖片http://tapchidesign.hostoi.com/help.jpg

我怎樣才能做到這一點？

Answer 1

當您附加處理程序時#selected_list沒有li元素，您應該從元素或文檔對象的靜態父項之一委派事件。

$('#selected_list').on('click', 'li', function(){ 
    $(this).appendTo('#unselected_list'); 
}); 

Answer 2

$('#selected_list li')返回與您在調用該選擇器時匹配的所有元素。點擊事件不會綁定到調用選擇器後創建的元素。

綁定，這樣只有在動態生成的因素考慮進去的單擊事件：

$('#selected_list').on('click', 'li', function() { 
    $(this).appendTo('#unselected_list'); 
}); 

Answer 3

我認爲這將有助於你 -

$('#selected_list li[id^="p"]').click(function(){ 
    $(this).appendTo('#unselected_list'); 
});