Question

你好Iam使用Jquery 1.6.2和JqueryUI 1.8.16 我有一个带有JqueryUI的可排序列表。每个Li项都有一个按钮（带x），它从列表中删除当前的li项。我还使用一个对话框将更多的li项添加到ul列表中。虽然我的项目在附加新的li项目之后在初始化方面运行良好但是删除按钮对附加项目不起作用不起作用，那些在第一次工作正常，排序选项也正常工作。这是我的代码

$.noConflict();
jQuery(document).ready(function($) {
//the sortbale list init
$( "#sortable" ).sortable({
  placeholder: "ui-state-highlight"
});

//when a remove button with class .remo is clicked remove the parent li
$( ".remo" ).click(function() {
            $(this).parent().remove();
        });

//and the dialog to add more li items
$( "#dialog" ).dialog({
            autoOpen: false,
            height: 500,
            width: 550,
            modal: true,
            show: "blind",
            hide: "explode",
      buttons: {
                Add: function() {
                 if($("#mark").val()!="" && $("#series").val()!="" ){
         var addme =   "<li >a new li item <div class='remo'>x</div></li>";
                   $("#sortable").append(addme);
                    $( this ).dialog( "close" );
                                           }
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            } 

        });

});//end of dom ready

我的HTML代码

<div id="dialog" title="Manage ul ">
<b>Click add for a new one</b><br>
</div>
<!--and the sortable list-->
<ul id="sortable" style="list-style-type: none;margin: 0;padding: 0;">
        <li>Li 1 <div class="remo" >x</div></li>
    <li >Li 2 <button class="remo">x</button> </li>
    <li >Li 3 <button class="remo" >x</button> </li>
</ul>

有什么建议吗？

Answer 1

事件处理程序（与click或bind绑定时）仅适用于当前与选择器匹配的元素。

使用delegate（在jQuery＆lt; 1.7中）或on（jQuery＆gt; = 1.7）将事件处理程序绑定到现在或将来与选择器匹配的元素。所以在你的案例中使用delegate：

$("#sortable").delegate(".remo", "click", function() { $(this).parent().remove(); });

示例： http://jsfiddle.net/bzKzs/

Jquery UI可排序列表更新

1 个答案: