javascript - 在通过 ajax 创建的页面元素上运行 javascript

Question

我正在使用 Javascript 根据用户在表单中输入的内容对页面的显示方式进行一些更改。除了一个元素外，这工作得很好而且花花公子。这是因为此元素会根据用户之前在表单中选择的内容通过 ajax 进行更改。

我正在使用 document.observe('dom:loaded', function() { 来运行我的 JS 代码，所以显然这个元素 JS 不起作用，因为元素是在 dom 之后添加的已加载。加载后在此页面元素上运行 JS 的最佳方式是什么？

谢谢!

Answer 1

您可以在父元素上处理事件，然后当事件触发时，您可以使用事件对象 的target 属性 来找出事件发生在哪个子元素中触发，例如，如果您想知道何时单击动态添加的按钮，您可以这样做:

document.getElementById("parent").click = function(event){
    if(event.target.id=="myButton"){
        //handle click
    }
}

<div id="parent">
    <input type="button" id="myButton" /> <!-- added dinamycally -->
</div>

这是利用 Event bubbling