javascript - Jquery/Javascript 在动态内容更新方面如何表现？

Question

最近我被分配到一个任务，我必须创建一个将调用 ajax 的 jquery 方法。 当 ajax 请求成功响应时，我将该响应 html 代码放在调用元素父 tr 之后。

在我的响应 HTML 中，我编写了一个 jquery 切换函数来向下滑动一些信息，并将文本从加号更改为减号，反之亦然。

但它的工作方式很奇怪，现在当添加live到它时，它就完美地工作了。

我使用的是 jquery 1.7。

这是我的代码

这是用于主页中的ajax

<script type="text/javascript" >
                            $(document).ready(function() {


                                $('.loadCampaign').click(function(e) {
                                    //e.preventDefault();
                                    var campId = $(this).attr('id');
                                    var arr = campId.split('_');
                                    campId = arr[1];
                                    var parentTrId = '#campaign_tr_' + campId;
                                    var cBodyClass = campId + '-cBody';
                                    var body = $('.' + 'trView_' + campId);

                                    if (body.length) {
                                        body.remove();
                                    } else {
                                        $.ajax({
                                            //dataType: "json",
                                            url: '{{config.adminUrl}}/campaign/loadCamapaignDetails',
                                            data: {'id': campId},
                                            type: 'get',
                                            success: function(jd)
                                            {
                                                if (jd !== '0') {
                                                    $(parentTrId).after('<tr id="view_content" class="even ' + cBodyClass + ' trView_' + campId + '">' + jd + '</tr>');
                                                } else {
                                                    alert('Your request can not be process! Please refresh the page and try again')
                                                }

                                            }
                                        });
                                    }

                                });
                            });

</script>

现在这个是用ajax响应编写的:

<script type="text/javascript" >
function showHideDate(id){
    $('#showHideDate_'+id).toggle(function(){
        $("#bookedDates_"+id).slideDown(
         function(){
           $('#showHideDate_'+id).text("-")
         }
       );
   },function(){
       $("#bookedDates_"+id).slideUp(
       function(){
           $('#showHideDate_'+id).text("+")
       }
       );
   });     
};

$(document).ready(function(){
$('.plus').live('click',function(){
        var id=$(this).attr('id');
        var idArr=id.split('_');
        id=idArr[1];
        //alert(id);
        showHideDate(id);
});


});

</script>

现在我不清楚当删除 live 并将其写入 .click(function() 时，为什么它不起作用？

我对 Javasript/jquery 不太了解

Answer 1

.live()生成所谓的委托(delegate)事件处理程序，该处理程序将其 Hook 到有问题的元素+在首次加载站点后动态生成的元素。 .click()只处理从一开始就存在的元素。

但是，.live()已弃用，您应该使用 .on()相反。