我的代码有什么问题？ （第二个on（单击）功能不起作用）

Question

I'm relatively new to Javascript so I might have made some bonehead mistake. I'm trying to code some simple javascript that removes a new list item. The new list item itself was dynamically created when a different javascript function ran. Here is the code:

$(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();
    });
});

fiddle: http://jsfiddle.net/nobisnews/v0hpbtqj/1/

When I remove the first on('click',function(){....} it works. As in,

$(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();
    });
});

clicking the x will create the alert. However with the first on(click) function in there, it won't. Thanks.

Answer 1

You are listening for events on elements that have not been created yet. Use event delegation instead:

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

Answer 2

Just Replace the following code

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

with the following

        $("#foodItemRows").append(str_to_append).on('click','.close-create',function()
        {
            alert('hello');
        })

Answer 3

You should add your event listener after you append the html, because the element does not exist yet.

$(".addRow").on('click',function(){
        var a = $("#foodItemRows").append(str_to_append);
        a.find(".close-create").on('click', function(){
            alert("This worked?");
            //$("#new-create").remove();
        });
});