javascript - 我的代码有什么问题？ (第二个on(单击)功能不起作用)

我是Java的新手，所以我可能犯了一些骨头错误。我正在尝试编写一些简单的JavaScript来删除新的列表项。新的列表项本身是在运行其他javascript函数时动态创建的。这是代码：

$(document).ready(function () {
    str_to_append = '<li class="list-group-item"> <form method="POST" action="www.example.com" accept-charset="UTF-8" class="qty-form form-inline col-xs-9"><input name="_method" type="hidden" value="PATCH"><input name="_token" type="hidden" value="hglVSLGEqDVUpGw2RWq6qfAgcwzNg5vVquYRaevm"> <input class="col-xs-6" name="name" type="text" value=""> <span class="pull-right col-xs-6"> <input type="button" class="down col-xs-3" value="-" data-min="0"/> <input class="col-xs-3" maxlength="2" name="quantity" type="text" value="0"> <input type="button" class="up col-xs-3" value="+" data-max="50"/> <input type="submit" class="submit col-xs-3" value="&#x2705" name="submit"/> </span> </form> <span class="col-xs-3 delete"> <input type="submit" class="close-create col-xs-4" value="&#x2715" name="delete"/> </span> </li>';

    $(".addRow").on('click',function(){
        $("#foodItemRows").append(str_to_append);
    });

    $(".close-create").on('click',function(){
        alert("This worked?");
        //$("#new-create").remove();
    });
});

小提琴：http://jsfiddle.net/nobisnews/v0hpbtqj/1/

当我删除第一个on（'click'，function（）{....}时，它可以正常工作。

$(document).ready(function () {
    str_to_append = '<li class="list-group-item"> <form method="POST" action="www.example.com" accept-charset="UTF-8" class="qty-form form-inline col-xs-9"><input name="_method" type="hidden" value="PATCH"><input name="_token" type="hidden" value="hglVSLGEqDVUpGw2RWq6qfAgcwzNg5vVquYRaevm"> <input class="col-xs-6" name="name" type="text" value=""> <span class="pull-right col-xs-6"> <input type="button" class="down col-xs-3" value="-" data-min="0"/> <input class="col-xs-3" maxlength="2" name="quantity" type="text" value="0"> <input type="button" class="up col-xs-3" value="+" data-max="50"/> <input type="submit" class="submit col-xs-3" value="&#x2705" name="submit"/> </span> </form> <span class="col-xs-3 delete"> <input type="submit" class="close-create col-xs-4" value="&#x2715" name="delete"/> </span> </li>';

    $("#foodItemRows").append(str_to_append);

    $(".close-create").on('click',function(){
        alert("This worked?");
        //$("#new-create").remove();
    });
});

单击x将创建警报。但是，有了第一个on（click）函数，就不会了。谢谢。

最佳答案

您正在侦听尚未创建的元素上的事件。改用事件委托：

$("#foodItemRows").on("click", ".close-create", function(){
    alert("This worked?");
    //$("#new-create").remove();
});

关于javascript - 我的代码有什么问题？ (第二个on(单击)功能不起作用)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33314139/