jQuery不能在動態加載的內容上使用$ .ajax

我正在開發一個登錄表單（AJAX）。當用戶點擊鏈接時，該登錄框將顯示爲浮動模式。該登錄框的內容使用jQuery的$（）。load函數從另一個頁面加載。單擊登錄框加載的鏈接。但是，當我實現AJAX提交該表格上：

$(document).ready(function(){ 
    $("form#loginbox").submit(function(e){ e.preventDefault(); /*AJAX function here*/ }); 
});

但形式提交正常，沒有什麼之後在函數給出，即（阻止默認 - 提交併使用AJAX）。那麼這是否意味着Loaded內容不被考慮在DOM內部，或者腳本無法讀取它？我加載內容僅一次：

$(document).ready(function(){ 
    if($("#loadedform").html() == "") 
    { $(this).load('/load/login.html'); } 
    $(".login-modal').slideDown('slow'); 
});

結構：

<div class="login-modal"><div id="loadedform"></div></div>

要加載的內容：

<form id="loginbox" method="post" action="xyz.html"> 
<!-- INPUT Boxes and Submit Button --> 
</form>

來源

2012-03-23 Abhishek Biswal

更改

$("form#loginbox").submit(function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

到

$('#loadedform').on("submit", "form#loginbox", function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

，或者如果你正在使用1.7之前版本：

$('#loadedform').delegate("#loginbox", "submit", function(e){ 
    e.preventDefault(); 
    /*AJAX function here*/ 
});

這是因爲加載頁面時登錄的事件，所以當你的表格被加載它沒有附加事件。此更改將在dom中的更高級別註冊該事件，以便任何新內容也能正常工作。

它也像你應該改變加載的形式代碼：

if($("#loadedform").html() == "") { 
    $("#loadedform").load('/load/login.html'); 
} 
$(".login-modal').slideDown('slow');

否則，你將不會被裝載到正確的地方。

來源

2012-03-23 08:39:40

你必須委派比使用。對動態元素（）方法

$(document).on("submit","#loginbox", function() { 
e.preventDefault(); 
/*AJAX function here*/ 
});

來源

2012-03-23 08:37:11 Starx

值得指出的是，使用'document'因爲你要綁定的事件處理程序是不建議，因爲如果你有太多這樣的處理性能將遭受靜態元素。這就是爲什麼jQuery遠離'.live（）'的原因，它完全使用了這種技術。相反，他們建議綁定到更接近動態添加內容的靜態元素，以便將事件從現在不得不冒泡。有關更多詳細信息，請參見[.on（）']（http://api.jquery.com/on/）的文檔中的事件性能部分。 – GregL 2012-03-23 08:49:18

@GregL，可能是Richard D，也需要閱讀你的評論。 – Starx 2012-03-23 08:53:12

e.preventDefault如果可以取消，則停止或取消當前事件，但提交事件將繼續向上傳播DOM，並且可能導致提交無論如何都會觸發。如果您真的更換了按鈕的默認功能，則可以同時使用e.preventDefault和e.stopPropagation，也可以只使用return false。

來源

2012-03-23 08:40:05

使用檢索的頁面上的腳本未運行，因此您的第一個嘗試通過AJAX提交表單的腳本將不會運行。

相反，移動是第一個腳本，以便在運行時完成，使用回調：

$(document).ready(function(){ 
    if($("#loadedform").html() == "") { 
     $(this).load('/load/login.html', function() { 
      $("form#loginbox").submit(function(e){ e.preventDefault(); /*AJAX function here*/ }); 
     }); 
    } 
    $(".login-modal').slideDown('slow'); 
});

此外，儘量不要用一個支架的風格像你在Javascript中有：

// some statement that begins a block here 
{ doStuff(); }

這是因爲Javascript解釋器有時會在第一行之後插入分號，這可能會破壞您的代碼。

看到Javascript Garden頁面上Automatic Semicolon Insertion的部分獲取更多細節。

來源

2012-03-23 08:44:15 GregL

謝謝。關於你的建議（塊事情） - >那麼，當我們使用壓縮器如JSMin壓縮JavaScript文件時會發生什麼？ – 2012-03-23 15:46:52

@AbhishekBiswal我相信，雖然我還沒有證實這一點，那些壓縮機自動插入明顯的括號（{''，'}'）在你的代碼。這發生在我身上，如果它錯誤地猜測他們應該去的地方，可能會再次引發問題。 – GregL 2012-03-25 23:22:22

jQuery不能在動態加載的內容上使用$ .ajax

回答

相關問題