jQuery，脚本无法识别新附加的元素 [英] jQuery, script doesn't recognize newly appended elements

问题描述

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

I have a short script that styles form radio buttons. Check working example http://jsfiddle.net/YJRsk/.

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

This works great when radio buttons already exist in DOM. So when page load, they get styled properly.

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

The problem is when i add radio buttons dynamically by appending them, the script doesn't recognize them since it already ran on page load. So for that reason i get an error Uncaught TypeError: Cannot read property 'style' of null. How can i work around this so that newly appended radios gets automatically styled on the spot without having to save and refresh the page. I tried to running the script after each radio append, but that didn't work.

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示例并单击添加无线电按钮进行测试。

Check the jsfiddle example and click the "add radio" button to test.

推荐答案

使用CSS规则并为所有单选按钮添加一个类。如果您使用高级jQuery选择器进行样式设计，我建议您只使用该样式函数创建每个新元素。

Use a CSS rule and add a class to all radio buttons. If you are using advanced jQuery selectors for styling, I'd recommend simply applying that styling function on creation of each new element.

编辑：这里的基本问题是你的.js文件是在页面加载时加载的，所以如果你使用类似的东西：

The basic problem here is that your .js files are loaded on page load, so if you use something like:

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

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

This event will only be 'tacked onto' .mybutton elements that exist at page load. If you create/add elements dynamically, you will have to assign the above event handler to them again.

这也会导致您的 uniqid （）函数将为当前添加的所有单选按钮创建相同的ID。请改为：

This also has the effect that your uniqid() function will be creating the same id for all radio buttons added currently. Do it like this instead:

$('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/

I don't know what jQuery styling you are using for your radio button, but the basic idea is to use the styling function on your newly created button each time. See this fiddle: http://jsfiddle.net/YJRsk/11/

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

If I am still missing something, please elaborate and show us the jQuery you use for radio button styling.

这篇关于jQuery，脚本无法识别新附加的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！