javascript append onclick func 未定义

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

为什么不叫定义？

我该如何解决？

Answer 1

HTML 属性不是附加事件侦听器的好方法，因为它们在全局范围内运行。 obj 存在于函数的作用域中，因此 onclick 属性中的代码不会看到它。您应该单独创建元素并附加侦听器：

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

Answer 2

function ABC(obj) {

    $("#question-header").append('<div id="this-div">TEST</div>');
   $("body").off("click","#this-div").on("click","#this-div",function(){ obj.func(); });
}

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

这是 100% 的工作..检查这个，你甚至可以放置点击以外的事件......

Answer 3

实际的问题是当元素被点击时，ABC 函数已经完成并且它的obj 参数将超出范围。由于您的代码将 obj 硬编码到点击事件代码中，因此 obj 在此时没有任何意义，您会收到 obj is not defined 错误。

现在，HTML 事件属性不再将函数作为其值，它们采用可执行的 JavaScript 指令。因此，您不希望将 onclick 设置为函数，而是希望将其设置为要执行的 JavaScript 字符串，并且可以从传入的函数返回：

function ABC(obj) {
  // By invoking the function stored in the passed in object, we can 
  // inject the appropriate JavaScript to run when the element gets clicked.
  $("#ID").append('<div onclick="' + obj.func() + '">TEST</div>');
}

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

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