javascript
动态添加html元素绑定事件,关于javascript：jQuery如何将onclick事件绑定到动态添加的HTML元素...
本問題已經有最佳答案，請猛點這里訪問。
我想將onclick事件綁定到用jquery動態插入的元素
但它從不運行綁定函數。如果您能指出這個示例為什么不起作用，以及如何使它正常運行，我將非常高興：
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
test of click binding
jQuery(function(){
close_link = $('Click here to see an alert');
close_link.bind("click", function(){
alert('hello from binded function call');
//do stuff here...
});
$('.add_to_this').append(close_link);
});
Test of click binding
problem: to bind a click event to an element I append via JQuery.
The link is created, then added here below:
Another is added here below:
編輯：我編輯了這個示例以包含插入方法的兩個元素。在這種情況下，不會執行alert()調用。(感謝@daff在評論中指出這一點)
當我在FF 3.5中測試時，您的示例頁運行良好
@很不幸你是對的！然后我顯然提取了我的代碼中實際工作的部分。謝謝你指出這一點！
@daff，我編輯了這個示例，使它包含兩個插入方法的位置。然后它真的停止工作了：)
以下是關于動態添加元素的單擊事件的有用文章codepedia.info/2015/02/click-event-for-dynamic-button-jquery
所有這些方法都已棄用。您應該使用on方法來解決您的問題。
如果要以動態添加的元素為目標，則必須使用
$(document).on('click', selector-to-your-element , function() {
//code here ....
});
這將替換已棄用的.live()方法。
*selector-to-your-element*應為'.some-class'或'#some-id'。
我的問題是我做的是像$('.row').on('click', function(){...});而不是$(document).on('click','.row',function(){...});這樣的事情。
記住，$(document)可以是頁面上任何不變的元素。這可以防止過多的事件冒泡，加速JS。如$(document)->$('.example-container')。
詳細說明-stackoverflow.com/questions/203198/&hellip；
第一個問題是，當使用多個元素對jquery集調用append時，將為每個元素創建要附加的元素的克隆，從而丟失附加的事件觀察者。
另一種方法是為每個元素創建鏈接：
function handler() { alert('hello'); }
$('.add_to_this').append(function() {
return $('Click here').click(handler);
})
另一個潛在的問題可能是，事件觀察者在元素被添加到DOM之前被附加。我不確定這是否有什么要說的，但我認為這種行為可能被認為是不確定的。更可靠的方法可能是：
function handler() { alert('hello'); }
$('.add_to_this').each(function() {
var link = $('Click here');
$(this).append(link);
link.click(handler);
});
當您必須綁定附加了其他函數的元素上的單擊時會出現問題。這就是為什么我建議使用am1ne答案。
實際上，當您針對由其他代碼創建的已知標記結構時。但是在這里，他自己插入元素，并且沒有明確的元素選擇器(它只是一個錨，可能有很多錨)，所以他必須添加額外的標記才能針對元素。在這種情況下，直接將處理程序附加到元素也很容易，而不是捕獲所有單擊并測試選擇器匹配。
我理解你的回答，不是說是錯的。當然，如果能夠動態地注入一些HTML(比如加載了無限滾動內容的Ajax的ul li圖片)，并且已經將按鈕綁定到某些動作(比如lightbox)，那就更舒服了。
對于默認情況下可以使用舊版本jquery的情況(例如Drupal7)，這個答案也非常有用。jquery 1.7中引入了on()。
實況轉播怎么樣？
$('.add_to_this a').live('click', function() {
alert('hello from binded function call');
});
不過，你所做的看起來應該是可行的。還有一個帖子看起來很相似。
你說得對，它確實起作用了。我的錯誤。所以我編輯了這個問題。
是的，這類問題正是現場活動要解決的問題。
這個問題與活動無關，盡管在這種情況下，活動可以解決這個問題。DAFF提供的答案也解決了這個問題，并且在不向方程式中添加新的活動概念的情況下解決了這個問題。
我還可以補充說，目前，這是綁定事件的實際方法。所以今天，我也會用live()來支持bind()。
現在不贊成使用live()，而贊成使用on()鏈接。
在jquery 1.9中，live()被否決并替換為on()。
派對稍微晚了一點，但我想我會嘗試清除jquery事件處理程序中的一些常見誤解。從jquery 1.7開始，應該使用.on()而不是不推薦使用的.live()，將事件處理程序委托給在分配事件處理程序后的任意點動態創建的元素。
也就是說，切換on的live并不是簡單的，因為語法略有不同：
新方法(示例1)：
$(document).on('click', '#someting', function(){
});
不推薦使用的方法(示例2)：
$('#something').live(function(){
});
如上圖所示，兩者之間存在差異。通過將選擇器傳遞給jquery函數本身，實際上可以調用與.live()類似的twist:.on()：
例3：
$('#something').on('click', function(){
});
但是，如果不象例1那樣使用$(document)，例3將不適用于動態創建的元素。如果您不需要動態委托，那么示例3就完全可以了。
Should $(document).on() be used for everything?
它可以工作，但是如果您不需要動態委托，那么使用示例3更合適，因為示例1需要從瀏覽器進行稍微多的工作。不會對性能產生任何實際影響，但使用最合適的方法是有意義的。
Should .on() be used instead of .click() if no dynamic delegation is needed?
不一定。以下只是一個快捷方式，例如3：
$('#something').click(function(){
});
上述方法是完全有效的，因此，在不需要動態委托的情況下，使用哪種方法確實是個人偏好的問題。
參考文獻：
j.on()查詢單
j.click()查詢單
j.live()查詢單
考慮一下：
jQuery(function(){
var close_link = $('Click here to see an alert');
$('.add_to_this').append(close_link);
$('.add_to_this').children().each(function()
{
$(this).click(function() {
alert('hello from binded function call');
//do stuff here...
});
});
});
它將工作，因為您將它附加到每個特定的元素上。這就是為什么在將鏈接添加到DOM之后，您需要找到一種方法來顯式地選擇添加的元素作為DOM中的jquery元素，并將click事件綁定到它。
正如建議的那樣，最好的方法可能是通過live方法將它綁定到特定的類。
謝謝你的回答，達夫。我只能向dom中的元素添加事件偵聽器，這是不可能的。但是，現在我將更改代碼來完成這項工作。(應該沒問題，因為我只是為添加的鏈接添加了特殊的CSS類)。
是的，你是對的，這不是DOM(它實際上只適用于一個)，對不起。但我也發現，綁定到動態創建的元素似乎非常煩人，只要它們不能被不同的jquery選擇器選擇。
"來自綁定函數調用的你好。"抱歉，這篇文章(整頁；問答)上的內容太多了，我只想幫你，你知道的，把它弄清楚。
function load_tpl(selected=""){
$("#load_tpl").empty();
for(x in ds_tpl){
$("#load_tpl").append('
'+ds_tpl[x]+'
');
}
$.each($("#load_tpl a"),function(){
$(this).on("click",function(e){
alert(e.target.id);
});
});
}
有時可能需要與元素一起創建click事件。例如，當基于選擇器的綁定不是選項時。關鍵部分是通過在單個元素上使用.replaceWith()，避免Tobias所討論的問題。請注意，這只是一個概念證明。
// This simulates the object to handle
var staticObj = [
{ ID: '1', Name: 'Foo' },
{ ID: '2', Name: 'Foo' },
{ ID: '3', Name: 'Foo' }
];
staticObj[1].children = [
{ ID: 'a', Name: 'Bar' },
{ ID: 'b', Name: 'Bar' },
{ ID: 'c', Name: 'Bar' }
];
staticObj[1].children[1].children = [
{ ID: 'x', Name: 'Baz' },
{ ID: 'y', Name: 'Baz' }
];
// This is the object-to-html-element function handler with recursion
var handleItem = function( item ) {
var ul, li = $("
" + item.ID +"" + item.Name +"
");
if(typeof item.children !== 'undefined') {
ul = $("
for (var i = 0; i < item.children.length; i++) {
ul.append(handleItem(item.children[i]));
}
li.append(ul);
}
// This click handler actually does work
li.click(function(e) {
alert(item.Name);
e.stopPropagation();
});
return li;
};
// Wait for the dom instead of an ajax call or whatever
$(function() {
var ul = $("
for (var i = 0; i < staticObj.length; i++) {
ul.append(handleItem(staticObj[i]));
}
// Here; this works.
$('#something').replaceWith(ul);
});
Magical ponies ?
我相信這樣做的好方法：
$('#id').append('...');
$('#subid').click( close_link );
我不能使用id添加到元素，因為我想為許多元素執行此操作。請參見更新后的代碼示例：)
$(document).ready(function(){
$(document).on('click', '.close', function(){
var rowid='row'+this.id;
var sl = '#tblData tr[id='+rowid+']';
console.log(sl);
$(sl).remove();
});
$("#addrow").click(function(){
var row='';
for(var i=0;i<10;i++){
row=i;
row='
'+ ? '
'+i+''+ ? '
ID'+i+''+ ? '
NAME'+i+''+ ? '
'+'
';console.log(row);
$('#tblData tr:last').after(row);
}
});
});
SrIDNameDelete
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的动态添加html元素绑定事件,关于javascript：jQuery如何将onclick事件绑定到动态添加的HTML元素...的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MacOS下MySQL配置
- 下一篇： JavaScript强化教程 —— Co