Php 在原始javascript中加载ajax之后，将事件（使用dynamiac数据）绑定到元素的最佳方法

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

我的问题是，我不确定使用动态内容执行此操作的最佳方法，而每次传递到事件中的数据都是不同的

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

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

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

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

go
document.getElementById（'myButton'）.addEventListener（'click'，function（）{myFunction（）}）；}）

我是否可以以更灵活的方式实现上述代码的结果，而不必为每个元素和每个请求输出脚本行

---

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

使用您自己的活动授权形式：

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);

其中，

容器

元素是这些动态元素/按钮在某个级别添加到的最近、稳定（未从DOM中添加/删除）的元素

事件绑定到一个包含元素一次，但是对于从子体中弹出的任何

单击

事件（

单击

事件的默认行为），都会触发该事件

这只需检查元素的标记名<代码>是否为“按钮”。这是相当广泛的，但如果这是你想要过滤掉的东西，那就是你可以使用的。如果要使用

类

，请在动态按钮中添加特定的

类

（可能是“特殊类”），并使用：

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>

参考：

---

如果进行ajax调用，为什么需要将参数回显到myFunction中？响应没有返回某种形式的数据吗？响应返回HTML。参数由ajax调用的响应决定。所以现在我需要使用同一响应中的数据将事件绑定到HTML中的元素。（我也试图避免使用内联事件）可以使用按钮的ID来确定应该传递给myFunction（）的值吗？那么具体是什么数据1，数据2，…等等？不。同一元素的数据每次都不同，因此在这种情况下，唯一的ID没有帮助。我接受了下面lan的解决方案，其中包括使用数据属性。通过这种方式，我可以将动态数据存储在元素本身中，并通过静态函数访问它。是的，这似乎是目前您能获得的最好结果。我如何将动态变量传递到特定按钮的处理程序代码中？这似乎只适用于始终具有相同参数的静态函数。@user969622刚刚更新了我的答案（最后的内容），希望这会有所帮助。看起来很有希望，但如果浏览器不支持HTML5呢？@user969622 From here（）-“注意：所有浏览器都可以使用data-*属性并使用getAttribute访问它们。”

<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");