爲什麼jQuery on-click事件處理程序對於動態加載的DOM元素無法正常工作？

我在我的主頁加載我的JavaScript文件，然後導航到需要onclick函數的頁面。 onclick附加到通過AJAX調用隨時間動態加載的內容。我試圖達到的元素構成，如：爲什麼jQuery on-click事件處理程序對於動態加載的DOM元素無法正常工作？

<a href="#" id="query_2" class="list-group-item query">Alle huurdergegevens</a>

而在我的JavaScript文件我寫了這個：

$(".query").click(function() { 
    var id = $(this).attr('id'); 
    id = id.replace(/\D/g,''); 
    console.log(id); 
    exeSQL(id); 
});

當我點擊該元素，從字面上沒有任何反應..登錄控制檯沒事，沒有錯誤藏漢..想不通我做錯了什麼TBH ..

來源

2017-03-07 Laurens Mäkel

我認爲你有這個問題，因爲你還沒有把document.ready函數中的onclick腳本。 –

問題是，因爲您動態加載內容，您的jQuery代碼不會將點擊事件添加到加載的元素。在完成加載內容之後，您需要附加點擊監聽器，或者您可以使用Sagar Arora的答案。 :) – Fissio

，當你在DOM DOM後加載任何元素創建，那麼你必須處理點擊這樣的事件使用on

$(document).on("click",".query",function() { 
    var id = $(this).attr('id'); 
    id = id.replace(/\D/g,''); 
    console.log(id); 
    exeSQL(id); 
});

來源

2017-03-07 09:52:44

謝謝，這樣做了！你能否就這個如何運作...？ –

............. + 1 –

@LaurensMäkel因爲您的內容是動態加載的，所以在這種情況下，我們必須使用$（document）而不是直接選擇元素。 –

你必須使用這個語法事件的動態內容

$(document).on('click','.query',function() { 
    var id = $(this).attr('id'); 
    id = id.replace(/\D/g,''); 
    console.log(id); 
    exeSQL(id); 
});

看到一個例子：

$(document).on('click', '#myButton', function(){ 
 
    alert('ok') 
 
})

<html> 
 
    <head> 
 
    </head> 
 
    <body> 
 
    <input type="submit" id="myButton"/> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">   </script> 
 
    </body> 
 
</html>

來源

2017-03-07 09:56:55 AchrafGounane

爲什麼jQuery on-click事件處理程序對於動態加載的DOM元素無法正常工作？

回答

相關問題