当许多标签元素是通过js动态加载出来的话,不能通过选择器增加事件监听即使用了on()也不行,因为当页面加载出来时,该选择器也是无效的。
所以可以用一个在页面绝对会出现的标签元素body或其他来充当选择器,对其用事件on监听,在内部再增加对子元素的监听即可,
这里的子元素可以是未来标签元素,就解决了对未来标签元素的事件监听。
如下:
$('body').on('click',
'.check-btn',
function() {
var $this = $(this);
var data = {
userDynamicsId: $('#userDynamicsId').val(),
operatorName: $.cookie("@(LoginCookieKey.ManageUserKey)"),
facechatId: $("#newselectInsertFacechatList").val()
};
if ($this.hasClass('pass')) { //一个未来
data.status = 2;
checkPost(data);
} else if ($this.hasClass('refuse')) { //另一个未来
data.status = 3;
checkPost(data);
} else if ($this.hasClass('changechat')) { //另一个未来
console.log(1);
}
});
标准:
$(selector).on(event,childSelector,data,function)
参数 描述
event 必需。规定要从被选元素移除的一个或多个事件或命名空间。
有click等
由空格分隔多个事件值,也可以是数组。必须是有效的事件。
childSelector 可选。规定只能添加到指定的子元素上的事件处理程序(且不是选择器本身,比如已废弃的 delegate() 方法)。
data 可选。规定传递到函数的额外数据。
function 可选。规定当事件发生时运行的函数。
例子:
<script>
$(document).ready(function(){
$("div").on("click","p",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>This is a new paragraph.</p>").insertAfter("button");
});
});
</script>
</head>
<body>
<div style="background-color:yellow">
<p>This is a paragraph.</p>
<p>Click any p element to make it disappear. Including this one.</p>
<button>Insert a new p element after this button</button>
</div>
</body>
可增加自定义事件,使用 trigger 触发,用法如下:
<script>
$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName + "! What a beautiful name!").show();
});
$("button").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});
</script>
</head>
<body>
<button>Trigger custom event</button>
<p>Click the button to attach a customized event on this p element.</p>
</body>