創建鏈接jquery

爲什麼鏈接不工作，如果鏈接是用JavaScript創建的？如果我做的鏈接沒有HTML（）輸出創建鏈接jquery

不工作

$(".link").on('click', function(){ 
    alert('Hello'); 
}); 

$("#link").html('<a href="#" class="link">Link</a>'); 

<div id="link"></div>

工作

$(".link").on('click', function(){ 
    alert('Hello'); 
}); 

<a href="#" class="link">Link</a>

來源

2015-10-02 Stefan Frederiksen

您的代碼不起作用，因爲事件被綁定在元素不DOM

存在包裝你的代碼ready或代碼移到底部的body所以你的代碼會在DOM被完全解析時運行
使用event delegation對動態創建的元素綁定事件。（這將使可選上面的第一個選項）

事件代表團允許我們附加一個單一的事件偵聽器，以父元素，這將爲所有與選擇者匹配的後代開火，無論這些後代是現在存在的還是將來添加的。

$(document).ready(function() { 
 
    $("#link").on('click', '.link', function() { 
 
    $("#link").append('<a href="#" class="link"> Link </a>'); 
 
    }); 
 

 
    $("#link").html('<a href="#" class="link">Link</a>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div id="link"></div>

來源

2015-10-02 14:49:16 Tushar

更改調用的順序它僅適用。當您附加處理程序時，類別爲.link的元素不存在於DOM中。您必須在div上通過html呼叫添加鏈接，然後才能通過on方法將處理程序附加到它。請參閱下面的完整工作示例。

$("#link").html('<a href="#" class="link">Link</a>'); 
 

 
$(".link").on('click', function(){ 
 
    alert('Hello'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="link"></div>

來源

2015-10-02 14:47:53

創建鏈接jquery

回答

相關問題