jquery - 在 html 代码中插入 javascript 函数

Question

我需要将动态 JavaScript 函数与复选框以及数组中的其他数据关联起来。例如。我有以下 JavaScript 数组:

var arr = ['hello', 'world'];
arr.unshift('buddy');
var index = 1;
arr.unshift('<input type="checkbox" id = "' + index + '" onchange="boxChange(" + index + ")>');

上面数组中的第一个元素是具有 onchange 事件的复选框。该事件会触发传入索引的函数 boxChange。

但是上面的复选框事件不起作用，我猜语法(引号)不正确。我需要一些帮助来纠正“引号”。谢谢

我在这里用 jsFiddle 编写了不完整的代码 http://jsfiddle.net/qq0dsz0f/

Answer 1

一般来说，混合标记和逻辑并不是一个好主意。您可以亲眼看到——一旦您开始想要以不平凡的方式操作 DOM，事情就会变得非常棘手、非常快。您不必担心报价是否正确，而且也不必担心!

jQuery 允许您自己创建一个元素，然后将各种事件处理程序附加到它，然后存储它，将其添加到您的文档等。

// First, let's create the element itself.
var element = $('<input type="checkbox" id="' + index + '">");

// Now, let's attach the logic.
element.on('change', function() {
    alert(index);
});

// Now do whatever you want with 'element'.

这样的语法是不是简洁多了？

其次，如果您碰巧在循环中使用它，由于该函数如何捕获“index”的值，您可能会得到一些奇怪的行为。如果是这种情况，您可能想查看 this question on capturing variables in JavaScript .