jQuery:创建一个 div 当它被点击时提醒你,
jQuery: create a div alert you when its is clicked,
我不能给它加上标题。这是开始:)...
我有 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 它将不起作用。
这有什么意义?
添加更多输入并删除它以防 he/she 添加太多,我注意到它不起作用,我想知道为什么:
这是实际代码:
$(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);
});
});
对于动态创建的内容,请使用 on
。
$("#wrapper-div").on("click", ".alert", function(){
alert("Here I am");
};
此外,值得一提的是,建议使用on
而不是click
进行监控,例如classes.
单击事件将冒泡到父元素,而不是分别向每个 class 元素添加事件处理程序。根据 jQuery 文档,将处理程序附加到最近的相关父元素(而不是文档)是个好主意。
一旦 DOM 完成加载,您的 document.ready 块就会被解释。在那个时间点,任何不在你的 DOM 中的东西都不能有适当的事件绑定。在这里您可以使用委托来确保您的绑定按计划进行。由于您的 'body' 将被加载,您可以按如下方式定位您的 .alert div 以获得点击:
$("body").on("click", ".alert", function(){
alert("Here I am");
};
我不能给它加上标题。这是开始:)...
我有 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 它将不起作用。
这有什么意义? 添加更多输入并删除它以防 he/she 添加太多,我注意到它不起作用,我想知道为什么:
这是实际代码:
$(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);
});
});
对于动态创建的内容,请使用 on
。
$("#wrapper-div").on("click", ".alert", function(){
alert("Here I am");
};
此外,值得一提的是,建议使用on
而不是click
进行监控,例如classes.
单击事件将冒泡到父元素,而不是分别向每个 class 元素添加事件处理程序。根据 jQuery 文档,将处理程序附加到最近的相关父元素(而不是文档)是个好主意。
一旦 DOM 完成加载,您的 document.ready 块就会被解释。在那个时间点,任何不在你的 DOM 中的东西都不能有适当的事件绑定。在这里您可以使用委托来确保您的绑定按计划进行。由于您的 'body' 将被加载,您可以按如下方式定位您的 .alert div 以获得点击:
$("body").on("click", ".alert", function(){
alert("Here I am");
};