onclick事件沒有觸發

-2

<html> 
<head> 
    <script src="../3003_Testing/js/jquery/dist/jquery.js"></script> 
    <script src="../3003_Testing/js/search.js"></script> 
<title>Search Box</title> 
    <link href="mycss.css" rel="stylesheet"> 
</head> 
<body> 

<section class="main"> 
    <form class="search" > 
     <input id="searchAddress" type="text" name="q" placeholder="Search address" oninput="getAddress()" /> 
     <ul class="results" id="addressList"> 
     <li id="staticli"><a href="index.html">Static li element<br><span>This is a Static li element</span></a></li> 
     </ul> 
    </form> 
</section> 
</body> 
</html>

我試圖讓寫一個函數來處理該事件的任何列表元素獲得點擊的時候，我有以下。但是，當我點擊<li>元素時，它似乎並沒有觸發。

$('#addressList').on('click', 'li', function() { 
    alert("clicked"); 
    alert($(this).text()); 

});

的<li>元素通過代碼動態創建了我的search.js：

listContents = $("<li id=\"" + i + "\"><a href=\"index.html\">" + addresses[i].lable + "</a></li>"); 
jQuery('#addressList').append(listContents);

而且我通過他們正在正確創建這樣

outerHTML: "<li id="0"><a href="index.html">6 Cashew Crescent<br><span>6 Cashew Crescent. (S)679751</span></a></li>"

我的瀏覽器控制檯驗證我們首先忽略動態列表。事情是即使我的靜態列表元素沒有響應單擊事件處理程序。一直在試圖找出了幾個小時，現在的問題..

我創建了一個的jsfiddle不工作https://jsfiddle.net/tmu50t9z/

的jsfiddle到我的整個代碼我靜li元素>https://jsfiddle.net/8wwnx64x/1/

來源

2016-03-27 Ng Hui Xiong

'https：// crossorigin.me /'已關閉，所以如果您依賴此代理（我假設您是），則您是SOL。 – zer00ne

的腳本在頭部呈現時立即運行。此時，引用的DOM元素還不存在。您可以通過延遲代碼的運行來解決這個問題，直到DOM完全加載，或者將所有腳本引用移動到html主體的底部。

要延遲：

$(function() { 
    $('#addressList').on('click', 'li', function() { 
     alert("clicked"); 
     alert($(this).text()); 
    }); 
});

來源

2016-03-27 14:55:27

只需將腳本放在底部，就在關閉''標籤之前，這樣就不會延遲渲染。頭文字=反模式但是，再次，不像我們需要的另一個問題和答案，必須有一個有效的原始關閉作爲愚蠢。 –

我同意，但將它移到那裏並不總是微不足道的。 –

我曾嘗試將腳本引用移至「」之前，它仍以相同的方式響應 –

-2

只是儘量把聽者點擊後每個<li>已經被添加到DOM或當你完成，填補了<ul>。讓我知道這次是否適合你。

來源

2016-03-27 15:00:45

onclick事件沒有觸發

回答

相關問題