如何通過JavaScript動態添加html代碼來添加onclick事件？

我嘗試通過JS在循環中添加一些列表元素。每個元素<li>包含<a>標記，現在我想在每添加一個<a>標記時添加onClick事件。我試圖這樣做：如何通過JavaScript動態添加html代碼來添加onclick事件？

liCode = '<li><a href="#">Text using variable foo: ' + foo + '</a></li>'; 
$('#list').append(function() { 
    return $(liCode).on('click', clickEventOccurs(foo)); 
});

在clickEventOccurs我只是輸出到控制檯foo。它以奇怪的方式工作：當每個標籤添加到列表中時，此事件僅在init時執行，但在點擊<a>之後不會執行任何操作。如何使它以正確的方式工作 - 點擊clickEventOccurs中執行的代碼？

來源

2013-07-29 sphinks

您可以添加'的onclick = 「your_function（）」'的''標籤字符串。 – MahanGM

但我可以解決如何添加到標記onClick =「my_function（foo）」的問題，其中foo是JS中的變量。它向我展示瞭解析錯誤。 – sphinks

首先，您不是分配回調函數，而是分配函數的結果。在正確的方式應該是這樣的：

$('#list').append(function() { 
    return $(liCode).click(function() { 
     clickEventOccurs(foo); 
    }); 
});

此外，因爲你是使用jQuery你可以使用事件代表團的好處和使用.on方法是這樣的：

$('#list').on('click', 'li', function() { 
    return clickEventOccurs(foo); 
});

來源

2013-07-29 09:30:33

第一個代碼片段效果很好，謝謝，但是現在還有其他問題，關於aby元素點擊，我看到foo的值與上一次循環迭代時的值相同，但不是每個元素的具體值foo。我甚至嘗試傳遞簡單的迭代次數var i，它在每次迭代時遞增，但仍然點擊我只看到i的最後一個值，但沒有顯示將此事件添加到list元素的迭代次數的值。 – sphinks

我建議你搜索一些關於JS閉包的信息，即使在StackOverflow上也有一堆類似的問題 –

傳遞變量到函數，你必須做第二個匿名的，否則你的ClickEventOccurs函數將在賦值時被調用，而不是作爲回調。

$('#list').append(function() { 
    return $(liCode).click(function() { 
     clickEventOccurs(foo) 
    }); 
});

來源

2013-07-29 09:31:06 Jivings

on()適合處理事件，甚至是動態創建的元素。

$('body').on('click', '#list li', function(){ 
    clickEventOccurs(foo); 
});

來源

2013-07-29 09:33:04

http://jsfiddle.net/lnplnp/uGJnc/

HTML：

<ol id="list"> 
    <li><a href="#">Text using variable foo: foovalue</a></li> 
</ol>

JAVASCRIPT/JQUERY：

function appending(foo) { 
    liCode = '<li><a href="#">Text using variable foo: ' + foo + '</a></li>'; 
    $('#list').append($(liCode)); 
} 

$('#list').on('click', 'li', function() { 
    return clickEventOccurs($("a", this).text()); 
}); 

function clickEventOccurs(v){ 
    console.log(v.split(":")[1].trim()); 
} 

appending("foo1"); 
appending("foo2"); 
appending("foo3");

來源

2013-07-29 10:03:50 Manu

如何通過JavaScript動態添加html代碼來添加onclick事件？

回答

相關問題