我正在使用该$.click()方法触发某些事件.但是之后我需要在声明元素之前为某些HTML元素设置一些事件.我们以此为例:
<script>
$('div.hide').click(function() {
$('div.hide').css({'display' : 'none'});
});
</script>
<div class="hide">some text</div>
Run Code Online (Sandbox Code Playgroud)
缺点是在设置.click()方法时,div.hide元素不存在,因此不设置触发器.
所以我转向这个.on()方法,如下:
<script>
$('div.hide').on('click', function() {
$('div.hide').css({'display' : 'none'});
});
</script>
<div class="hide">some text</div>
Run Code Online (Sandbox Code Playgroud)
但这也行不通.我认为召唤.on()将使所有存在和未来的div.hide元素触发'click' function().
我设法克服了这个不便,但据我所知,我想知道我做错了什么.有没有办法为未来的HTML元素分配触发器?
我的说法是:
<script>
$(document).ready( function() {
$('div.hide').click(function() {
$('div.hide').css({'display' : 'none'});
});
});
</script>
<div class="hide">some text</div>
Run Code Online (Sandbox Code Playgroud)
Poi*_*nty 10
你错过了三个版本的版本:
$('body').on('click', 'div.hide', function() { ... });
Run Code Online (Sandbox Code Playgroud)
这会将处理程序置于其上,<body>但它会捕获当目标元素与选择器(第二个参数)匹配时冒泡并调用处理程序的事件.
处理程序不必继续<body>; 它可以是你的任何父容器元素<div>.
"on"方法取代了旧的"live"和"delegate"方法,以及"绑定"本身.