重新加載DIV（點），阻止進一步的OnClick-處理器+知名度

Question

我有這樣一個DOM：

<div class="inner-content"> 
    <div class="catalogue" style="display: none;"> 
     <div class="wrapper"> 
      <!-- some dom here --> 
      <button type="button" id="updateCatalogue"> 
     </div> 
    <span class="addNewRow" data-row="1">add new row</span> 
</div> 

我也有一個JS-功能，正確地觸發，當點擊「點擊新行」。看看這裏：

$('.addNewRow').click(function() { 

    // determine closest wrapper 
    var wrapper = $(this).closest(".questions"); 
    var kategorieId = $(this).data("row"); 

    // add another row 
    $("<div class='question_wrapper'><input type='text' class='textinput_questions new_question' data-category='"+kategorieId+"' name='new_question["+kategorieId+"][]'><input type='checkbox' class='radioinput' style='margin-left: 6px !important;' name='new_questionActive[]'>").insertAfter(".question_wrapper:last"); 
}); 

當我打開我的網站，手動導航到DIV目前我在此代碼工作完全正常值得一提的，我做了一些Ajax的東西，我猜。是問題的一部分：

$('#updateCatalogue').click(function() { 

    // inserting stuff 
    $('.new_question').each(function() { 
     data = "some data"; 
     $.ajax({ 
      url: "my-file.asp", 
      type: "GET", 
      data: data, 
      success: function(response) { 
       console.log(question); 

       // reload the frame afterwards 
       $(".inner-content").load(location.href + " #catalogue"); 
      } 
     }); 
    }); 
}); 

的部分在updateCatalogue -function正確處理和內部my-file.asp代碼做的工作也是如此。但是一旦頁面「重新加載」，我就不能再點擊「添加新行」......或者更像，在此之後它什麼都不做。我的控制檯沒有JS錯誤。

由於我正在重新加載整個頁面，我應該可以訪問所有內容，對不對？

旁註：這些功能在$（文件）。就緒（），如果這是針對

不動態創建的（我猜），因爲該網站重新加載這些元素很重要，即使通過ajax調用

Answer 1

問題是，當您使用$('selector').click()時，它只會在第一次通過時設置點擊事件。如果你重建它，那麼它會丟失它的click()。

您可以將您的$('selector').click()位移動到您創建它們的位置，但更好的解決方案是替代使用$(document).on()。

$(document).on('click', '.addNewRow', function() { 
    // do something here 
}); 

您只需將您的第一個代碼塊更改爲該代碼塊即可。通過在document（這是頁面上的所有內容）上放置點擊事件，而不是特定元素，如果這些元素更改或消失，它不會丟失。第二個參數然後提供一個過濾器選擇器，這與您在使用.click()時通常會放置的過濾器選擇器相同，即使被單擊的元素與該過濾器匹配，也只會觸發該點擊。

Answer 2

問題是因爲您將您的點擊處理程序綁定到頁面上第一次加載時存在的按鈕，但是當您重新加載該DIV內容時，該按鈕被替換爲新的（未綁定的）。

你最好用jQuery.on。

如果你改變你的點擊處理代碼如下它應該工作：

$('.inner-content').on('click', '.addNewRow', function() { 

    // determine closest wrapper 
    var wrapper = $(this).closest(".questions"); 
    var kategorieId = $(this).data("row"); 

    // add another row 
    $("<div class='question_wrapper'><input type='text' class='textinput_questions new_question' data-category='"+kategorieId+"' name='new_question["+kategorieId+"][]'><input type='checkbox' class='radioinput' style='margin-left: 6px !important;' name='new_questionActive[]'>").insertAfter(".question_wrapper:last"); 
}); 

上述工作，因爲你不刪除/更換內內容DIV本身，只是其中的內容。