Question

我的项目中有一个按钮，当你单击它时会调用一个函数调用并将onclick事件添加到项目中的所有元素并显示我隐藏的弹出元素容器。
我有一个函数可以搜索我页面中的所有存在元素，并将onclick事件添加到他们具有某些类的某些元素中。
我的元素存储在列表数组中。在这个数组的每个单元格中（数组名称为list）存储了如下元素：

list[0] = document.getElementById("my_div_id");
list[1] = document.getElementById("my_div_id_1");
list[2] = document.getElementById("my_div_id_2");
...
list[n] = document.getElementById("my_div_id_n");

我的javascript代码顶部有如下函数：

function say_hello(e, msg) {
    if (e == null) e = window.event;
    //now e handler mouse event in all browser !!!
    alert (e + "::" + msg);
}

我有一个函数将onclick事件添加到数组中的每个元素。我在下面的类型中添加onclick事件（与（*）注释分开），但不执行任何操作：

function search_and_add_events_to_all_dragable_elements (list) {
    for (var z = 0; z < list.length; z++) {
        list[z].href = "javascript:;";

        var e;
        var test_msg = "VAYYYYYYYYYY";

        /**************
        element.onclick = new Function { alert ('hi'); };
        element.onclick = new Function () { alert ('hi'); };
        element.onclick = new function { alert ('hi'); };
        element.onclick = new function () { alert ('hi'); };
        element.onclick = new function () { return alert ('hi'); };
        element.onclick = function () { return alert ('hi'); };
        element.onclick = alert ('hi');
        element.onclick = "alert ('hi');";
        element.onclick = say_hello(e, test_msg);
        element.onclick = "say_hello();";
        element.onclick = (function (e, test_msg) { return function(e) { sib(e, test_msg); };
        element.onclick = (function () { return function() { alert("ahaaay"); };
        **************/

        list[z].style["padding"] = "20px";
        list[z].style["border"] = "solid 10px";
        list[z].style["backgroundColor"] = "#CCC";
    }
}

我在代码末尾更改style以执行我的代码工作并真正结束。每次都会更改样式，但onclick事件不会添加到我的div 只有一种方法可以将onclick添加到我的项目中。与下面相同：

list[z].setAttribute("onclick", "alert(\"hi\");");

但有更好的方法吗？

Answer 1

有一种更好的方法。我的第一个错误是在我的所有元素加载到我的页面之前使用JavaScript。要解决它，你必须在页面加载结束时调用元素或将你的javascript代码放在项目的末尾。然后，当您的页面中存在元素时，您的代码就会执行有关它的更多详细信息，请参阅以下链接：
JavaScript that executes after page load

http://www.w3schools.com/jsref/event_onload.asp

我的第二个错误是伤害:(
我有一个div，它本身就包含了我所有的其他元素。它在加载时被称为display: none;。当我调用我的函数时，它显示为none并且所有这些都运行良好（比如我的新样式）但是onclick事件不起作用：（（我花了两天时间来解决这个问题：（（
请注意，当您向其添加display: none事件时，您的元素不应该onclick样式。
然后，您可以动态地将这种类型的创建onclick事件用于您的项目：

list[z].onclick = (function (e, test_msg) {
    return function(e) {
        sib(e, test_msg);
    };
})(e, test_msg);

这是我所知道的最佳方式。您可以管理事件处理程序并将您的参数也发送到您的函数。

我多次使用另一种方式在我的项目中动态添加onclick事件。

如何通过javascript将onclick事件添加到存在元素？（的document.getElementById）

1 个答案:

如何通过javascript将onclick事件添加到存在元素？ （的document.getElementById）

1 个答案:

如何通过javascript将onclick事件添加到存在元素？（的document.getElementById）