jQuery，脚本无法识别新添加的元素

Question

我有一个简短的脚本，用于设置单选按钮的样式。 检查工作示例http://jsfiddle.net/YJRsk/ 。

当DOM中已经存在单选按钮时，这非常有用。 因此，在页面加载时，它们的样式正确。

问题是当我通过添加单选按钮动态添加单选按钮时，脚本无法识别它们，因为它已在页面加载时运行。 因此，由于这个原因，我得到一个错误Uncaught TypeError：无法读取null的属性'style'。 我该如何解决这个问题，以便新添加的收音机可以在现场自动设置样式，而不必保存和刷新页面。 我尝试在每次添加广播后运行脚本，但这没有用。

var item = '<li><input type="radio" value="'+uniqid()+'" class="styled" name="test"/><label class="radioButton">Radio button</label></li>';
$('button').live('click', function() {
    $(item).appendTo('#radio');
})

检查jsfiddle示例，然后单击“添加单选”按钮进行测试。

Answer 1

使用CSS规则，并将类添加到所有单选按钮。 如果您使用高级jQuery选择器进行样式设置，则建议您在创建每个新元素时简单地应用该样式设置功能。

编辑：这里的基本问题是您的.js文件是在页面加载时加载的，因此，如果您使用类似以下内容的文件：

$(".mybutton").click(function() {
    alert("test");
});

此事件将仅“添加到”页面加载时存在的.mybutton元素上。 如果动态创建/添加元素，则必须再次将上述事件处理程序分配给它们。

这还会产生影响，您的uniqid()函数将为当前添加的所有单选按钮创建相同的ID。 改为这样做：

$('button').live('click', function() {
    var item = '<li><input type="radio" value="'+uniqid()+'" class="styled" name="test"/><label class="radioButton">Radio button</label></li>';
    $(item).appendTo('#radio');
})

编辑2：

我不知道您的单选按钮使用什么jQuery样式，但是基本思想是每次都在新创建的按钮上使用样式功能。 看到这个小提琴： http : //jsfiddle.net/YJRsk/11/

如果我仍然缺少某些东西，请详细说明并向我们展示您用于单选按钮样式的jQuery。

Answer 2

如果您知道单选按钮的最大数量，这就是我要做的：

1. 在表单中添加最大数量的单选按钮（仅显示您不想在一开始显示的按钮）

2. 留下脚本样式

3. 单击按钮时，仅逐一显示已样式化的单选按钮

我希望我足够清楚。

Answer 3

您忘了在Javascript中添加一段HTML代码。

var item = '<li><span class="radio" style="background-position: 0pt 0pt;"></span><input type="radio" value="'+uniqid()+'" class="styled" name="test"/><label class="radioButton">Radio button</label></li>';

$('button').live('click', function() {
    $(item).appendTo('#radio');
})

http://jsfiddle.net/YJRsk/3/

也就是说，使用CSS设置单选按钮的样式可能是一个更明智的主意