Question

这是我的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("");
    }
});

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

Answer 1

使用以下代码替换$('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() - 它们会自动检测是否已经创建了小部件。

函数在Jquery中的prepend内部不起作用

1 个答案: