在 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。

但是上面的复选框事件不起作用，我猜语法（引号）不对。我需要一些帮助来更正 "quotes"。谢谢

我这里有一个用 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.

在 html 代码中插入 javascript 函数

insert javascript function in html code

checkbox

jquery

events

onchange