.append 函数后 jQuery 不起作用答案

【问题标题】：jQuery isn't working after .append function.append 函数后 jQuery 不起作用
【发布时间】：2012-02-18 07:32:07
【问题描述】：

所有，我有一些显示的链接，如果有人喜欢它，有人可以单击该链接，然后我基本上将它分配给另一个带有删除链接的 div，以便可以将其删除。这是.post的代码

jQuery.post("save_song.php", { song_id: song_id, love_like_hate: "love" },
       function(response) {
         if(response.responseText1=="too_many"){
                alert(response.responseText2);
            }else if(response.responseText1=="already_selected"){
                alert(response.responseText2);
            }else{
                alert(response.responseText2);
                jQuery("#div_song_id_"+song_id).html(response.responseText1);
                jQuery("#love_it").append(response.responseText2);
                jQuery("#current_count_love").html(response.responseText3);
                if(response.responseText4=="remove_initial"){
                    jQuery("#love_none").hide();
                }
            }
    }, "json");

这是发送回页面的 save_song.php 页面：

echo json_encode(array(
            'responseText1' => 'Youve added '.$artist_name.' - '.$track_name.' to your '.$love_like_hate.' list!',
            'responseText2' => '<div id="div_added_song_id_'.$song_id.'" style="padding:0 0 0 10px; "><span style="display:inline-block; width:200px;">'.$artist_name.'</span><span style="display:inline-block; width:400px;">'.$track_name.'</span><span style="display:inline-block; width:100px;">'.$track_time.'</span><span style="display:inline-block; width:100px;"><a href="#" class="remove_song" id="delete_'.$song_id.'">Remove</a></span></div>',
            'responseText3' => $resultrowschecktotal
        ));

我的问题是，当 response.responseText2 附加到我的 div 时，.remove_song 的 jquery 不起作用，它基本上只是使用链接并尝试执行 #。这是 remove_song 的代码：

jQuery(".remove_song").click(function(){
    event.preventDefault();
    song_id = jQuery(this).attr("id");
    song_id = song_id.split("_");
    song_id = song_id[1];
    var answer = confirm("Do you want to remove this song?")
    if (answer){
        jQuery.post("delete_song.php", { song_id: song_id },
            function(response) {
                jQuery("#div_added_song_id_"+song_id).hide();
                jQuery("#current_count_"+response.responseText2).html(response.responseText1);
            }, "json");
    }
});

由于在 DOM 完成时没有加载新附加的链接，我如何仍将其用于新附加的链接？

【问题讨论】：

标签： php jquery ajax json dom

【解决方案1】：

你需要使用 $.live() 或 $.delegate() 而不是 click()。

jQuery('#love_it').delegate('.remove_song', 'click', function (){
    event.preventDefault();
    song_id = jQuery(this).attr("id");
    song_id = song_id.split("_");
    song_id = song_id[1];
    var answer = confirm("Do you want to remove this song?")
    if (answer){
        jQuery.post("delete_song.php", { song_id: song_id },
            function(response) {
                jQuery("#div_added_song_id_"+song_id).hide();
             jQuery("#current_count_"+response.responseText2).html(response.responseText1);
        }, "json");
    }
});

【讨论】：

【解决方案2】：

你最新的锚元素没有绑定任何东西，所以点击时它不会做任何事情，试试jquery live 像这样：

jQuery(".remove_song").live('click', function(){
    event.preventDefault();
    song_id = jQuery(this).attr("id");
    song_id = song_id.split("_");
    song_id = song_id[1];
    var answer = confirm("Do you want to remove this song?")
    if (answer){
      jQuery.post("delete_song.php", { song_id: song_id },
        function(response) {
            jQuery("#div_added_song_id_"+song_id).hide();
            jQuery("#current_count_"+response.responseText2).html(response.responseText1);
        }, "json");
    }
});

jquery 1.7+ 使用

jQuery(document).on('click','.remove_song',function(){
    event.preventDefault();
    song_id = jQuery(this).attr("id");
    song_id = song_id.split("_");
    song_id = song_id[1];
    var answer = confirm("Do you want to remove this song?")
    if (answer){
      jQuery.post("delete_song.php", { song_id: song_id },
        function(response) {
            jQuery("#div_added_song_id_"+song_id).hide();
            jQuery("#current_count_"+response.responseText2).html(response.responseText1);
        }, "json");
    }
});

【讨论】：

.live 在 v1.7+ 中已贬值。推荐给用户$(document).on('click', ".remove_song", function(){。只是为了进一步帮助答案。

【解决方案3】：

jquery .click 事件仅适用于您分配给它的元素，因此如果您要动态引入内容，则需要使用实时事件：http://api.jquery.com/on/ 您可以将其设置为监视“DOM 区域”以进行更改，并自动将点击事件分配给它们。

我注意到其他人发布了使用 .live 函数的帖子，但是，从 jQuery 1.7 开始，它已被弃用。

【讨论】：