Jquery/Javascript如何处理动态内容更新? [英] How Jquery/Javascript behave on dynamic content updation?

问题描述

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

Recently I was assigned to task where I have to make a jquery method which will call an ajax. When response comes successfully from ajax request, I put that response html code after the calling elements parent tr.

在我的响应HTML中，我编写了一个jquery切换功能，以向下滑动一些信息，并将文本更改为正号改为负号，反之亦然.

In my response HTML I have written a jquery toggle function to slide down some information and change the text to plus to minus and vice versa.

但是它运行起来很奇怪，现在，当它添加了 live 之后，它就可以完美运行了.

But it worked weirdly, Now when added live to it then it worked perfectly.

我正在使用jQuery 1.7.

I am using jquery 1.7.

这是我的代码

这是用于主页中的ajax

this is for ajax in the main page

<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响应编写的:

Now this one is written in ajax response:

<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()时，为什么它不起作用?

Now I am not clear that when remove that live and wirte it as .click(function() then why its not working?

我在Javasript/jquery中听不到很多声音

I am not that much sound in Javasript/jquery

推荐答案

.live()生成所谓的委托事件处理程序，它会在首次加载网站后将其挂接到有问题的元素+动态生成的元素上. .click()只执行从开始就存在的元素.

.live() generates so called delegate event handler, which hooks it to elements in question + dynamically generated elements after site is first loaded. .click() does just the elements that are there since the beginning.

但是，已弃用 .live()，您应该使用

However, .live() is deprecated and you should use .on() instead.

这篇关于Jquery/Javascript如何处理动态内容更新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！