jquery追加似乎搞乱了我的代码

Question

嗨，我正在尝试动态附加一些 div，然后在它们上使用 jquery，例如单击事件，但它不起作用，我不知道为什么会这样。

$("#addGenreFinal").click(function () {
     var genre = $('#newGenreTxt').val();
     $("#txtAddGenreContainer").slideUp();
     $('#otherFavContainer').append('<div class="songTilesGenreContainer"><div class="addSongsBtnContainer icons" ><img src="../../Content/images/add.png"             style="padding:10px;"/></div><div style="float:right;padding-right:26px;padding-    bottom:20px;margin-top:20px;color:#949494;font-size:20px;">' + genre + '</div></div>');
     $('#newGenreTxt').val('');
    });

    $(".songTilesGenreContainer").click(function () {
        alert('hello'); 
    });

为什么警报框没有弹出，当我使用其他预定义的类时它可以工作，但它不能在动态附加的元素上嗯...

Answer 1

您应该使用 live 绑定(bind)事件，因为元素稍后会添加到文档中

$(".songTilesGenreContainer").live("click", function () {
    alert('hello'); 
});