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

我有一个简短的脚本，样式表单单选按钮。检查工作示例http://jsfiddle.net/YJRsk/。jQuery，脚本无法识别新添加的元素

当DOM中已经存在单选按钮时，这很好用。所以当页面加载时，他们的风格正确。

问题是，当我通过追加动态添加单选按钮时，脚本无法识别它们，因为它已经在页面加载中运行。所以出于这个原因，我得到一个错误Uncaught TypeError：无法读取null的属性'样式'。我该如何解决这个问题，以便新近添加的收音机在现场自动设置样式，而不必保存和刷新页面。每次无线电追加后，我都试图运行脚本，但那不起作用。

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示例，然后单击“添加收音机”按钮进行测试。

来源

2012-01-16 Pinkie

问题在于你的* custom_form.js *。哪些只在加载时运行，而不是在加入到dom后运行。 – Yoshi 2012-01-16 08:11:15

我正在寻找一种方法来重新运行这个js文件，每次追加后，所以新添加的元素得到样式 – Pinkie 2012-01-16 08:49:43

你可以，通过简单地添加'Custom.init（）;'到onclick处理程序。但正如预期的那样，这仅仅对于新元素才是正确的，并且已经*重新合成*坏了。我最好的建议是转储整个脚本并仅使用jQuery对其进行重做。 – Yoshi 2012-01-16 09:00:27

使用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。

来源

2012-01-16 08:10:00

你是对的唯一。它应该在里面的点击功能+1。但你的答案仍然不能解决我的问题。我试图找到一种方法来在每次追加后运行广播脚本，这样我们就可以在所有新添加的收音机上获得一个功能单选按钮 – Pinkie 2012-01-16 08:23:53

更新了我的答案。 – 2012-01-16 08:27:30

您的jsffidle示例5不起作用。 – Pinkie 2012-01-16 08:29:43

您忘了在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

来源

2012-01-16 08:17:07 Jeffrey

谢谢，我知道这一点，但这并不能使按钮的功能。我的问题是如何在追加后再次运行脚本，以便我们获得一个功能单选按钮。 – Pinkie 2012-01-16 08:21:12

使用jQuery的'live'功能。 – Jeffrey 2012-01-16 08:22:42

我已经在使用jsfiddle了。 – Pinkie 2012-01-16 08:24:40

如果你知道单选按钮的最大数量，这是我会做什么风格你的单选按钮：

将最大数量的单选按钮添加到表单中（只显示那些您不想在开头显示的单选按钮）
留下一个脚本来他们的风格
在按一下按钮，就已经表现出风格单选按钮逐一

我希望我是很清晰。

来源

2012-01-16 08:39:03 PrimosK

也许你必须隐藏额外的按钮后，脚本有他们的风格......尝试，你会看到... – PrimosK 2012-01-16 08:40:01

我也想过这个，我同意这是最好的解决方案。重新运行整个脚本看起来很浪费，可能会导致一些问题。 – 2012-01-16 09:35:02

该脚本不会被编写为在同一页面上多次调用。我的意思是，它甚至没有这种方式。你可以尝试一下。只需调用'Custom.init（）;'。 – PrimosK 2012-01-16 09:43:04

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

回答

相关问题