Question

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

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

问题是当我通过附加动态添加单选按钮时，脚本不会识别它们，因为它已经在页面加载时运行。因此，我得到一个错误Uncaught TypeError：无法读取属性＆＃39; style＆＃39;为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示例并单击＆＃34;添加无线电＆＃34;按钮进行测试。

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

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

向表单添加最大数量的单选按钮（仅显示您不想在开头显示的那些按钮）
留下脚本来设置样式
点击按钮，只需逐个显示已设置样式的单选按钮

我希望我足够清楚。

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

设置单选按钮的样式可能更明智

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

3 个答案: