Jquery / Javascript如何處理動態內容更新？

Question

最近，我被分配到必須做一個調用ajax的jquery方法的任務。 當響應成功來自ajax請求時，我將該響應html代碼放在調用元素的父tr之后。

在我的響應HTML中，我編寫了一個jquery切換功能，以向下滑動一些信息，並將文本更改為正號改為負號，反之亦然。

但現場加入到它，然后它完美地工作時，它的工作古怪，現在。

我正在使用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>

現在我不清楚，當刪除該活動並以.click .click(function()將其寫入時，為什么它不起作用？

我在Javasript / jquery中沒有那么多聲音

Answer 1

.live（）生成所謂的委托事件處理程序，該事件處理程序將其掛接到有問題的元素上，並在首次加載網站后動態生成元素。 .click（）僅執行從開始就存在的元素。

然而， .live（）已被廢棄，你應該使用。對（）來代替。

Answer 2

您應該使jQuery api文檔成為離您最近的聖經。

從jQuery 1.8+開始

您必須使用.on() bind和delegate events 。

.on()

總體來說，這對於它的delegate功能非常重要，這對於在標記中添加或插入動態內容等情況至關重要。

在這里查看： http : //api.jquery.com/on/

Answer 3

為了理解“實時”的意義，讓我們舉個例子：在此頁面上：

<html>
   <body>
     <div class=".myDiv"></div>
   </body>
</html>

簡單頁面吧？ 如果您使用如下所示的塊視圖：

+--------
|<body>
|   +----
|   |<div class="myDiv">

當您將事件附加到html中的元素時，它們會隨意“附加”它們：例如，以.myDiv上的click事件為例

正常點擊： $('.myDiv').click(function(){//do something})
實時點擊（不建議使用）： $('.myDiv').live('click', function(){//do something})
開（最佳方式）： $(body).on('click','.myDiv', function(){// do something})

他們這樣代表自己：

+--------+
|<body>  <- Event Click on .mydiv ex: ( $('.myDiv').live('click')
|                                    Or $(body).on('click','.mydiv'))
|
|
|    +--------
|    | <div .myDiv> <- Event Click ex: ($('.myDiv').click())
|    |
|    +--------
|
+----------

現在，您可以看到使用.live時，該事件將自身附加在html頁面的根元素上（通常是document（））。

如果添加（通過ajax）新的html元素：

+--------+
|<body>  <- Event Click on .mydiv ex: ( $('.myDiv').live('click')
|                                    Or $(body).on('click','.mydiv'))
|
|
|    +--------
|    | <div .myDiv> <- Event Click ex: ($('.myDiv').click())
|    |
|    +--------
|       vv
|    +--------
|    | <div .myDiv> -> Yay ! I'm new from ajax
|    |
|    +--------
|
+----------

如果在從Ajax提取新元素之前在.myDiv（s）上編寫了“ click”函數，則新元素將不會具有事件處理程序，並且不會執行任何操作，這是因為事件通常是“附加的”到HTML元素

但正如您所看到的，在我的示例的根元素上，活動仍在繼續進行。 基本上，執行“實時”或“在線”（更精確）會監聽頁面上的所有點擊，當發生點擊時，它將確定所點擊的區域是否是您想要的區域，從而觸發您的功能，只要標簽在這里或聽到這些點擊的時間即可。 這就是事件委派的意思。

“ on”的最佳實踐是將事件附加到靜態元素上，該元素是動態獲取的HTML的直接父級，以便只有重要的區域才能監聽事件。

希望能有所幫助

Jquery / Javascript如何處理動態內容更新？

問題描述

3 個解決方案

解決方案1
2 已采納 2013-07-18 10:23:11

解決方案2
1 2013-07-18 10:40:27

解決方案3
1 2013-07-18 11:21:07

Jquery / Javascript如何處理動態內容更新？

問題描述

3 個解決方案

解決方案1 2 已采納 2013-07-18 10:23:11

解決方案2 1 2013-07-18 10:40:27

解決方案3 1 2013-07-18 11:21:07

解決方案1
2 已采納 2013-07-18 10:23:11

解決方案2
1 2013-07-18 10:40:27

解決方案3
1 2013-07-18 11:21:07