在 html 从 ajax 响应输入到容器后，我想将一个事件绑定(bind)到各种元素。我知道这可以通过在插入 html 后立即运行 addEventListener 或 on+event=function(){} 来实现。
我的问题是我不确定处理动态内容的最佳方法，而每次传递到事件中的数据都不同。
例如，将以下html加载到容器中:
<button id="myButton">go</button>
现在，我需要将 onclick 函数绑定(bind)到包含在远程端呈现的数据的按钮元素 - onclick 函数类似于:
myFunction($data1,$data2,$data3);
而 $data1,$data2,$data3 是带有动态数据的变量。
我可以将此函数绑定(bind)到按钮的一种方法是在将 HTML 数据插入容器后输出要评估的脚本，因此 HTML 输出将如下所示:
<button id="myButton">go</button>
<script>document.getElementById('myButton').addEventListener('click',function(){myFunction(<?php echo $data1.','.$data2.','.$data3 ?>)});})</script>
无论如何，我是否可以以更灵活的方式从上述代码中获得结果，而不必为每个元素和每个请求输出该脚本行？
我想到的一个方法是有一个bind函数，在每次请求完成后调用，在这个函数中每个需要事件绑定(bind)的元素都存储在一个数组中。一个循环遍历数组并绑定(bind)适当的事件和函数——但这对于动态数据来说会变得复杂。有什么想法吗？
最佳答案
使用您自己的事件委托(delegate)形式:
var container = document.getElementById("container");
container.addEventListener("click", function (e) {
e = e || window.event;
var target = e.target || e.srcElement;
if (target.tagName === "BUTTON") {
// execute handler code for buttons
}
}, false);
其中 container 元素是最近的、稳定的(未从 DOM 添加/删除)元素，这些动态元素/按钮在某种程度上被添加到。
该事件只绑定(bind)到一个包含元素，但会被从后代冒出的任何 click 事件触发(click 事件的默认行为)。
这将简单地检查元素的 tagName 是否为“button”。这是相当广泛的，但如果这是你想要过滤掉的东西，那就是你可以使用的。如果你想使用一个class，添加一个特定的class(可能是“special-class”)到动态按钮并使用:
if (~(" " + target.className + " ").indexOf(" special-class ")) {
// execute handler for buttons with class "special-class"
}
如果您需要通过按钮/元素传递特定数据，请在生成按钮时将包含它的特定 data-* 属性添加到按钮:
<button id="whateverId" data-data1="$data1" data-data2="$data2" data-data3="$data3">go</button>
在您知道目标按钮的事件处理程序中，您可以使用:
var data1 = target.getAttribute("data-data1");
var data2 = target.getAttribute("data-data2");
var data3 = target.getAttribute("data-data3");
引用:
关于javascript - 在原始 JavaScript 中加载 ajax 后将事件(使用动态数据)绑定(bind)到元素的最佳方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15995813/