Question

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

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

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

Answer 1

您应该使用live绑定事件，因为稍后将元素添加到文档

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

Answer 2

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

应改为：

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

因为当上面的代码运行时，您尝试绑定的元素不存在。 .live()就是为了这个目的：

为与当前匹配的所有元素附加事件的处理程序选择器，现在和将来

以下是.live()的jQuery文档的链接：http://api.jquery.com/live/

如果您有要绑定的元素的容器元素，则

.delegate()是首选方法。 .delegate()不会一直冒泡到文档对象，而是将事件冒泡到选定的根元素。文档：http://api.jquery.com/delegate/

.delegate()

的示例

$('#otherFavContainer').delegate(".songTilesGenreContainer", 'click', function () {
    alert('hello'); 
});

Answer 3

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

尝试使用live而不是.click。 .click在幕后做了一个绑定。由于.bind仅绑定在执行时存在于DOM上的选择器中的元素，因此它不会找到您的动态内容。即使在代码运行之后，.live也会附加到添加到dom的元素。

Answer 4

您应该在追加后将点击处理程序添加到流派容器中;因为你要在#addGenreFinal点击处理程序之外添加它，所以它没有被添加到任何东西中。

您还可以使用.live() (docs)函数将处理程序添加到尚未创建的选择器中。

jquery append似乎搞砸了我的代码

4 个答案: