在 html 代码中插入 javascript 函数答案

【问题标题】：insert javascript function in html code在 html 代码中插入 javascript 函数
【发布时间】：2015-01-06 14:58:09
【问题描述】：

我需要将动态 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/

【问题讨论】：

是否有理由使用内联事件处理程序而不是采用不显眼的样式？
对不起，什么是不显眼的风格？
看起来您已经知道如何在 js 中连接字符串，所以对第二个 index 变量执行相同操作。但是你的报价无论如何都不匹配......
jsfiddle.net/qq0dsz0f/2
在控制台中检查 html 本身，会看到你的引号被打破了。使用适当的转义和匹配。您问题中代码的语法突出显示也应该是一个线索

标签： jquery events checkbox onchange

【解决方案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。

【讨论】：

实际上，如果您使用委托，它会变得更加清晰。然后你只需要附加一次处理程序：$('#table1').on('change', 'input[type="checkbox"]', function (e) { alert($(this).attr('id')); }
那更干净。整洁！
另外你应该提到他不能只使用一个数字（即索引）作为他的 id 属性......它需要以字母开头......所以像checkbox-1 这样的东西会是很好，但1 不是。
@prodigitalson 这在 html5 规范中不正确，允许使用数字 ID
@charlietfl 很有趣...我不知道。我实际上并没有完整地审查规范，只是一些较新的功能。很高兴知道，但我想我会避免在没有前缀的情况下使用它，它可能会与 id 中的任何其他内容混淆。