1

从 ajax 响应将 html 输入到容器后，我想将事件绑定到各种元素。我知道这可以通过在插入 html 后立即运行 addEventListener 或 on+event=function(){} 来实现。

我的问题是我不确定使用动态内容的最佳方法，而传递给事件的数据每次都不同。

例如，以下 html 被加载到容器中：

<button id="myButton">go</button>

现在，我需要将 onclick 函数绑定到包含在远程端呈现的数据的按钮元素 - onclick 函数将类似于：

myFunction($data1,$data2,$data3);

而 $data1,$data2,$data3 是动态数据的变量。我可以将此函数绑定到按钮的一种方法是在将 HTML 数据插入容器后输出要评估的脚本，因此 HTML 输出将如下所示：

<button id="myButton">go</button>
<script>document.getElementById('myButton').addEventListener('click',function(){myFunction(<?php echo $data1.','.$data2.','.$data3 ?>)});})</script>

无论如何，我是否可以以更灵活的方式从上述代码中获得结果，而不必为每个元素和每个请求输出该脚本行？

我想到的一种方法是在每个请求完成后调用一个绑定函数，在这个函数中，每个需要事件绑定的元素都存储在一个数组中。一个循环遍历数组并绑定适当的事件和函数——但这会因动态数据而变得复杂。有任何想法吗？

4

1 回答 1

2

使用您自己的事件委托形式：

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 添加/删除）的元素。

该事件一次绑定到一个包含元素，但会为click从后代冒出的任何事件触发（事件的默认行为click）。

这将简单地检查tagName元素的是否是“按钮”。这是相当广泛的，但如果这是你想要过滤掉的东西，那就是你可以使用的东西。如果要使用 a class，请将特定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");

参考：

于 2013-04-14T04:44:28.547 回答