0

这是我的 HTML 代码：

<div id="playlist_item">
    <ul class="link" id="link">
        <div class="style"><input type="checkbox" class="styled">
            <div id="style"></div>   
        </div>
        <li class="edit">http://carouselinfo.com/canal/</li>
        <span class="main edit">123</span>
    </ul>
</div>

当我预先添加 ul 元素时，该元素的其他 jquery 事件不起作用

jQuery代码：

$(function() {    
    $(".new").click(function(){
    $("#playlist_item").prepend("<ul class='link' id='link'><div class='style'><input type='checkbox' class='styled'><div id='style'></div></div><li class='edit'>Please edit this file</li><span class='main edit'>Write Duration</span></ul>")
});

此代码不适用于前置元素

$('.edit').editable();

$('input:checkbox').click(function () {
    var check_all = $("input[type='checkbox']");
    if ($(this).closest("ul").hasClass("change_link")) {
        $(this).closest("ul").removeClass("change_link");
    } else {
        $(this).closest("ul").addClass("change_link");
        $(".option").html("<div id='icons'><div class='add'></div></div><div id='icons'><div class='delete'></div></div>");
    }

    if (check_all.length == $("input[type='checkbox']").not(":checked").length) {
        $(".option").html("");
    }
});

我哪里错了？请帮帮我。。

4

1 回答 1

3

替换$('input:checkbox').click(function() {为以下代码：

$('#playlist_item').on('click', 'input:checkbox', function() {

将事件绑定到$('input:checkbox')它时，只会绑定到执行绑定时存在的匹配元素。通过使用委托语法，您可以将事件绑定到父元素，从而从所有子元素接收事件，即使它们在调用.on()函数时不存在。

由于您还想调用.editable()新元素，请在添加新元素后执行以下操作：

$('.edit:not(.editable-done)').addClass('editable-done').editable();

这将确保.editable()每个元素只调用一次。如果它是一个 jQuery UI 小部件，您可以简单地保留$('.edit').editable()- 它们会自动检测该小部件是否已经创建。

于 2012-05-18T13:36:57.563 回答