jQuery'on'沒有在動態生成的模態彈出框中註冊

我的印象是，jQuery的on事件處理程序是爲了能夠'偵聽'動態創建的元素，並且它應該取代live的行爲。但是，我所經歷的是，使用on不捕獲點擊事件，而使用live成功！jQuery'on'沒有在動態生成的模態彈出框中註冊

我的情況的棘手方面是我不僅動態地創建內容，而且我通過AJAX .get()調用並將結果HTML插入到模態.dialog() jQueryUI彈出窗口中。

這裏是什麼，我試圖完成的簡化版本（包裹在$(document).ready(...)）：

$.get("getUserDataAjax.php", queryString, function(formToDisplay) { 
    $("#dialog").dialog({ 
     autoOpen: true, 
     modal: true, 
     buttons... 
    }).html(formToDisplay); 
}); 
$(".classThatExistsInFormToDisplay").on("click", function() { 
    alert("This doesn't get called"); 
});

從on的文檔，我發現這裏面這是我是如何接近寫我on事件：

$("p").on("click", function(){ 
    alert($(this).text()); 
});

然而，出於某種原因，live將作爲我期待 - 而on失敗我。

這不是一個問題：「我怎樣才能使它發揮作用」，因爲我發現，on會成功（捕獲點擊）我若內的function(formToDisplay)回調。

我的問題是：on有什麼問題，它不是在模態彈出窗口中找到我的動態創建的元素？我的jQuery實例是jquery-1.7.2。 jQueryUI是1.8.21。

這裏有兩個jsFiddles近似的問題。在兩個實例中單擊「測試」一詞以查看不同的行爲。代碼的唯一區別是替換on的live。

其中the click被live捕獲。

其中the click未被on捕獲（點擊'測試 - 點擊我'看不到任何事情發生）。

我意識到我可能只是使用on不適當或要求它做一些事情，並沒有打算，但我想知道爲什麼它不工作（但如果你有一些非常聰明的，隨時分享）。感謝您的智慧！

更新/答案/解決方案：

根據用戶「未定義」，不同的是，on不是從document對象，而live確實頂部委派一路/是。

作爲克勞迪奧提到，有引用動態創建的元素的on文檔的部分，並且您在在運行時所需存在的查詢的$("")部分什麼。

這裏是我的新解決方案：捕獲點擊事件on我的模態對話框，雖然它沒有任何內容，當事件在運行時創建時，將能夠找到我的內容和元素與生成的特殊類後來。

$("#dialog").on("click", ".classThatExistsInFormToDisplay", function() { 
    ... //(success! Event captured) 
});

非常感謝！

來源

2012-10-02 veeTrain

live代表從文檔對象的事件，但on沒有按

$(document).on("click", ".clickHandle", function() { 
    alert("Content clicked"); 
});

：「T，如果你想使用 on方法委託的情況下，你應該從元素的靜態父母一方或 document對象委託事件

來源

2012-10-02 12:26:14 undefined

迷人！我發現你的建議成功了。多麼壯麗！我將'on'事件附加到Modal對話框，然後將點擊次數限制在我想要真正關注的課程中。雖然這會比捕獲我的課程更多的觸發因素（假設），但這似乎是一個很好的解決方案。感謝您的回答！ – veeTrain

@veeTrain不客氣。 – undefined

你是救命恩人，先生！謝謝。 – Agent007

問題是，附加事件的元素必須存在。

你必須使用on這樣來捕捉動態創建p標籤點擊

$("#existingContainerId").on("click", "p", function(){ 
    alert($(this).text()); 
});

如果您有沒有相關的現有容器的使用，你可以使用$("body")或$(document)

如果選擇被省略或爲空，事件處理程序被稱爲直接或直接綁定。每次在選定元素上發生事件時，都會調用處理程序，無論它是直接發生在元素還是來自後代（內部）元素的氣泡。

當提供選擇器時，事件處理程序被稱爲委託。當事件直接發生在綁定元素上時，不會調用該處理程序，而只會爲與選擇器匹配的後代（內部元素）調用該處理程序。 jQuery將事件從事件目標引發到處理程序所附的元素（即，最內層到最外層的元素），並沿着匹配選擇器的路徑上的任何元素運行處理程序。

事件處理程序僅綁定到當前選定的元素;它們必須在您的代碼調用.on（）時在頁面上存在。爲確保元素存在且可以選擇，請在文檔就緒處理程序中爲頁面上HTML標記中的元素執行事件綁定。如果將新的HTML注入頁面，請在將新的HTML放入頁面後選擇元素並附加事件處理程序。或者，使用委派事件附加一個事件處理程序，描述未來

看看第直接和委託的事件here更多細節

來源

2012-10-02 12:25:51

它就在那裏！感謝您指出我對這個問題的相關文檔部分。 – veeTrain

jQuery'on'沒有在動態生成的模態彈出框中註冊

回答

相關問題