在项目中经常会遇到需要在页面中插入动态元素的情况,比如页面中有一个按钮:
<div id="btn">确定</div>
点击按钮时在body中插入一段div,然后要求点击这段div时再弹出一个提示。
var login_div = '<div class="login-box" style="cursor:pointer">ok</div>';
正常写法是:
$("#btn").click(function(){
$("body").append(login_div);
});
$(".login-box").click(function(){
alert("我是ok");
})
这种情况下的"$(".login-box")"是获取不到的,因为 element.click这种写法不支持给动态元素重新绑定事件.不过可以利用jq的on来绑定,改写下:
$(".login-box").on("click",".login-box",function(){
alert("我是ok");
})
另外还有一种情况需要移动到一个元素上,然后显示隐藏的元素,如:
$("body").on("mouseover mouseout",".upload-question",function(event){
if(event.type == "mouseover"){
$(this).find(".tip").show();
}else if(event.type == "mouseout"){
$(".tip").hide();
}
})