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

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

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

问题是当我通过附加它们动态添加单选按钮时，脚本无法识别它们，因为它已经在页面加载时运行。 因此，我得到一个错误Uncaught TypeError：无法读取null的属性’style’。 我该如何解决这个问题，以便新添加的无线电在现场自动设置样式，而无需保存和刷新页面。 我尝试在每个无线电附加后运行脚本，但这不起作用。

var item = '
Radio button
'; $('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 = '
Radio button
'; $(item).appendTo('#radio'); }) 

编辑2：

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

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

Answer 2

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

1. 向表单添加最大数量的单选按钮（仅显示您不希望在开头显示的那些按钮）

2. 留下脚本来设置样式

3. 单击按钮，只需逐个显示已设置样式的单选按钮

我希望我足够清楚。

Answer 3

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

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

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

也就是说，使用CSS设置单选按钮的样式可能是一个更聪明的想法