不确定.on()方法

Sor*_*anu 5 javascript jquery

我正在使用该$.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"方法,以及"绑定"本身.

  • 我认为重要的一点是它需要在某个地方附加事件,并且DOM中的CLOSEST可能位置是理想/最佳位置,因此具有ID的DIV(其中插入不存在的元素)将是最佳的.为此+1 - 因为OP似乎不明白对不存在的元素的附着仍然不附加. (2认同)