jQuery:在点击时创建一个div提醒,

时间:2015-01-03 18:28:21

标签: javascript jquery html

我不能给它起一个标题。它的诞生:)......

我有add div,点击它时会创建alert div。单击alert div时,它会提醒我。

就是一个例子。

$("#add").click(function(){
    $("#add").after("<div class='alert'>Alert</div>");
});

$(".alert").click(function(){
            alert("Here I am");
});

我注意到如果我在html模板中放置一个div作为<div class="alert">Alert</div>警报将起作用。但是,如果我通过jQuery / JS添加div,它将无法工作。

那是什么意思? 添加更多输入并删除它以防他/她添加太多,我注意到它不起作用我想知道原因:

这是实际代码:

$(document).ready(function(){
    var i           = $("#new_field_count").val();

    //add new field
    $("#addnew_field").click(function(){
        i++;
        $("#new_field").before("<div class='fivepadding'><input name='part1_" + i + "' type='text' placeholder='<?=lang('addform_p1')?>'> = <input name='part2_" + i + "' type='text' placeholder='<?=lang('addform_p2')?>'> <span class='remove clickable'><?=lang('addform_field_remove')?></span> </div>");
            $("#new_field_count").val(i);
    });

    // remove the field
    $(".remove").click(function(){
        i--;
        $(this).parent('div').remove();
        $("#new_field_count").val(i);
    });
});

2 个答案:

答案 0 :(得分:2)

对于动态创建的内容,请使用on

$("#wrapper-div").on("click", ".alert", function(){
        alert("Here I am");
}; 

此外,值得一提的是,建议使用on代替click来监控示例类。
而不是单独向每个类元素添加事件处理程序,click事件将冒泡到父元素。根据jQuery文档,将处理程序附加到最接近的相关父元素(而不是文档)是个好主意。

答案 1 :(得分:0)

DOM完成加载后会解释您的document.ready块。在那个时间点,DOM中没有任何东西都没有正确的事件绑定。在这里,您可以使用委派来确保绑定按计划进行。因为你的身体&#39;将加载,您可以将您的.alert div定位为点击次数,如下所示:

$("body").on("click", ".alert", function(){
    alert("Here I am");
};