Question

要设置单选按钮的样式，我想使用需要以下代码行的jQuery插件：

$('input').iCheck();

它不起作用，因为我的按钮是在用户点击时动态生成的。有没有办法让插件（任何插件真的）适用于所有元素，包括那些动态生成的元素？

编辑：我的代码如下，不确定这是否可以理解。

该页面具有硬编码模式窗口的标记：

<div id="fadeandscale">
    <div class="fadeandscale_inner"></div>
</div>
<a id='button_page2' class="egg_button"></a>

.egg_button链接打开模态。然后将模态/灯箱jQuery插件与此标记相关联：

$('#fadeandscale').popup();

然后我执行一系列on（）绑定。

function populate_modal(x) {

    var button_id = '#button_page' + x;
    var page_id = '#course_intro_page' + x;

    $(button_id).on('click', function() {   
        $('.fadeandscale_inner').empty(); 
        var a = $(page_id).html(); 
        **$('.fadeandscale_inner').html(a);**   // content is duplicated to modal
    });

}               
for (i = 0; i < 5; i++) { 
    populate_modal(i);
}

然后，当点击打开模态的链接（这也会触发页面内容复制到模态中）时，将单选按钮样式jQuery插件绑定到输入元素：

$( "body" ).on( "click", ".egg_button", function() {
    $('input').iCheck();
});

从页面中硬编码的标记中，单选按钮：

<div class='options_section'>   
    <input type="radio" name="modal1" id="modal1_option1" value="The analysis of large volumes of data">
    <label for="modal1_option1">The analysis of large volumes of data</label>
</div>

Answer 1

如果页面加载时DOM中没有这些项目，那么您可以使用jQuery的.on()将函数附加到动态生成的元素。

我不确定你是如何生成按钮的，但也许这会让你走上正确的道路：

$( "body" ).on( "click", "input", function() {
  $( this ).iCheck();
});

修改

根据您的评论，更新后的代码为：

$( "body" ).on( "click", ".open_modal", function() { $( "input" ).iCheck(); });

Answer 2

您可以将类与所有动态生成的元素相关联。创建按钮时，添加如下css类属性：

<button type="button" class="cls"></button>

然后在你的javascript中：

$(".cls").on("click", function()
{
// You can use $(this) to get any specific attribute of the button clicked
});

将函数应用于动态生成的元素

2 个答案: