javascript - jQuery，脚本无法识别新附加的元素

Question

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

当单选按钮已经存在于 DOM 中时，这非常有用。所以当页面加载时，它们会得到正确的样式。

问题是当我通过附加它们来动态添加单选按钮时，脚本无法识别它们，因为它已经在页面加载时运行了。因此，出于这个原因，我收到一个错误 Uncaught TypeError: Cannot read property 'style' of null。我该如何解决这个问题，以便新添加的 radio 在现场自动设置样式，而无需保存和刷新页面。我尝试在每次 radio 追加后运行脚本，但这没有用。

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 样式，但基本思想是每次都在新创建的按钮上使用样式功能。看到这个 fiddle :http://jsfiddle.net/YJRsk/11/

如果我仍然遗漏了什么，请详细说明并向我们展示您用于单选按钮样式的 jQuery。