jq的绑定动态元素

在项目中经常会遇到需要在页面中插入动态元素的情况,比如页面中有一个按钮:

<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();
    }
})
原文地址:https://www.cnblogs.com/dxzg/p/8808797.html