javascript append onclick 函数未定义

Question

function ABC(obj) {
  $("#ID").append('<div onclick="obj.func();">TEST</div>');
}

ABC({func: function() { alert("abc"); } })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ID"></div>

如果运行此函数，将无法运行 obj.func

为什么不叫define呢？

如何解决？

Answer 1

HTML 属性不是 append 事件监听器的好方法，因为它们在全局范围内运行。 obj 存在于函数的作用域中，因此它对于 onclick 属性中的代码不可见。您应该创建元素并单独 append 监听器:

function ABC(obj) {
    // Create a DIV element
    var div = $("<div>");

    // Add an event listener that calls the function
    div.on("click", function () {
        obj.func();
    });

    // Append the created element to #ID
    $("#ID").append(div);
}

函数表达式确实可以访问其父作用域。

如果obj.func不使用this并且不返回值，您也可以直接使用该函数作为监听器:

div.on("click", obj.func);