如何將動態內容綁定到文檔就緒事件？

對於這個問題，我對jQuery或JavaScript並不感興趣，所以可能有一個重複的問題，但我不知道如何爲我的搜索詞組。我想我必須使用.trigger()或on()，但我不確定如何正確實施它，或者在這種情況下可能無法實現。如何將動態內容綁定到文檔就緒事件？

我有三頁，我index.php頁面HTML，一個dispatch.php頁，供應通過Ajax動態內容到索引頁面，並與所有我的jQuery/JavaScript的最後scripts.js。

這裏是僞代碼示例：

的index.php

<form id="form1"> 
    <input type="text" name="whatever" /> 
    <input type="submit" name="whatever_submit" disabled="disabled" class="enable" /> 
</form> 
<form id="form2"> 
    <input type="text" name="whatever2" /> 
    <input type="submit" name="whatever_submit2" disabled="disabled" class="enable" /> 
</form> 
<!-- this is where the dispatch page will deliver content to --> 
<div id="drophere"></div>

/js/scripts.js

$(document).ready(function() { 
    // Runs on page load and enables all the submit buttons 
    $('.enable').attr('disabled',false); 
    // Code to dispatch 
    $.ajax({ 
     url: '/dispatch.php', 
     ....ect 
});

/dispatch.php

<!-- Does php stuff, sends back this additional form --> 
<form id="form3"> 
    <input type="text" name="whatever3" /> 
    <input type="submit" name="whatever_submit3" disabled="disabled" class="enable" /> 
</form>

這裏的問題是，jQuery的上form1和form2$('.enable').attr('disabled',false);的作品，但我現在用Ajax加載表單並因爲其他兩個是在文件準備實現它不綁定到動態form3。我成功地使用on.()作爲互動元素，因爲有觸發器（click,mouseover等）但它是這個被動應用程序，我真的不知道該怎麼做（也許有沒有辦法或者我可能不會打電話給我正確的事件類型？）。作爲一種變通方法，我把同樣使腳本進入派出HTML：

<form id="form3"> 
    <input type="text" name="whatever3" /> 
    <input type="submit" name="whatever_submit3" disabled="disabled" class="enable" /> 
</form> 
<!-- 
So this is added at the bottom and runs as soon as the content loads to 
the index.php page 
--> 
<script> 
$('.enable').attr('disabled',false); 
</script>

這似乎是一個笨拙的解決辦法，所以有綁定動態內容從javascript位於scripts.js文檔就緒事件有道或者是重做這段代碼對使用on()類似單擊事件工作的正確方法：

$(document).on('click','.enable',function(){ 
    $(this).attr('disabled',false); 
    // Possibly do the form submit here...whatever I get to work 
});

我希望有綁定，因爲我有很多其他類似的情況下，這將適用的方法到，但我想我可能不得不切換到每點擊的基礎？任何援助將不勝感激。

來源

2016-11-10 Rasclatt

只需在ajax調用之後運行該行？ – DaniP

@DaniP好的，所以有辦法本地綁定，沒有用戶交互或手動我拿？在ajax腳本中涉及自動化，還有其他情況適用於這種情況，所以我試圖避免每個特定事件的硬編碼，但聽起來像我必須這樣做。我希望能夠讓一個聽衆像'$（document）.on（'ready'，'。enable'.... etc'）那樣，即使那樣會更好，但是從你所說的我可能是SOL。 – Rasclatt

只需在ajax-call的回調函數中執行$('.enable').attr('disabled',false);即可。

，你可以使用MutationObserver這是現代的瀏覽器JS引擎的一部分做什麼：https://developer.mozilla.org/en/docs/Web/API/MutationObserver

來源

2016-11-10 19:51:36 einherjer

對不起，正如我在對@DaniP的評論中指出的那樣，我希望在元素加載到頁面後使用綁定類型的方法來完成此操作，但有多種方法可以實現，例如ajax回調。 – Rasclatt

從你們倆都說過的話，聽起來好像沒有辦法使用'.on（）'方法將動態內容綁定到文檔就緒元素。 – Rasclatt

你可以做的是使用MutationObserver是現代瀏覽器JS引擎的一部分：https://developer.mozilla.org/en/docs/Web/API/MutationObserver – einherjer

我認爲你是追加的HTML表單中的數據記錄。所以在ajax函數中，你需要找到新添加的按鈕，然後你可以很容易地禁用它。就像下面的代碼一樣。

$(document).ready(function() { 
     // Runs on page load and enables all the submit buttons 
     $('.enable').attr('disabled',false); 
     // Code to dispatch 
     $.ajax({ 
      url: '/dispatch.php', 
      ...#drophere 
      success: function(data) { 
      $('#drophere').html(data); 
      // find and disable button 
      $('#drophere').find('.enable').attr('disabled',false); 
     } 
    });

來源

2016-11-10 20:45:51

如何將動態內容綁定到文檔就緒事件？

回答

相關問題