jquery - 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')在您调用它时返回与该选择器匹配的所有元素。click 事件不会绑定到调用选择器后创建的元素。

绑定 click 事件，以便将动态生成的元素考虑在内：

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

Answer 3

我想这会对你有所帮助-

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