javascript - ajax调用后使用onclick函数

Question

所以我构建了一个页面，所有数据都被拉入其中。在 IE9+ 和 Chrome 中工作得很好，但需要它在 IE8 中工作，并且通过 ajax 拉入的任何内容都无法工作。代码应该是这样的。

ajax

$.ajax({
    url: "includes/myfile.php",
    type: "GET",
    data: ({'data' : data,}),
    success: function(data){
    $("section").append(data);
    }
});

JS

function myfunction(data){
//do something
}

HTML

< button onclick='myfunction(data)' > click here < /button>

注意:我知道 $(something).on(stuff,stuff) 会起作用，但这将涉及重建我的所有功能。所以如果可以的话尽量避免这种情况。

Answer 1

这是因为 jQuery/JavaScript 不知道 myfile.php 中加载的项目。最简单的解决方案是使用 on() 来委托(delegate)事件，这样这些事件就会在 DOM 树中向上冒泡。

http://api.jquery.com/on/

例如 -

$(document).on('click', 'element', function() {

现在，当单击元素时，单击事件会冒泡到文档中将对其执行操作的位置。事件冒泡到的元素必须在 jQuery 代码最初运行时存在，以便 jQuery 能够“感知”该元素并可以拦截该元素的冒泡事件。这使得文档成为一个相当安全的选择，但如果您愿意，您可以缩小范围。

如果您不想走更简单的路线，您可以用普通 JavaScript 编写事件委托(delegate):

// get the parent element, add a click listener...
document.getElementById("element").addEventListener("click", function(e) {
    // example using a list item
    if(e.target && e.target.nodeName == "li") {
        console.log("list item ", e.target.id.replace("post-"), " was clicked!");
    }
});