不确定.on（）方法

Question

我使用$.click()方法来触发一些事件。 但是之后我需要在声明元素之前为某些HTML元素设置一些事件。 我们以此为例：

<script>
    $('div.hide').click(function() {
        $('div.hide').css({'display' : 'none'});
     });
</script>
<div class="hide">some text</div>

缺点是在设置div.hide .click()方法时， div.hide元素不存在，因此不设置触发器。

所以我转向.on()方法，如下所示：

<script>
    $('div.hide').on('click', function() {
        $('div.hide').css({'display' : 'none'});
    });
</script>
<div class="hide">some text</div>

但这也行不通。 我认为调用.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>

Answer 1

你错过了三个版本的版本：

$('body').on('click', 'div.hide', function() { ... });

这会将处理程序放在<body>但它会捕获当目标元素与选择器（第二个参数）匹配时冒泡并调用处理程序的事件。

处理程序不必继续<body> ; 它可以是<div>任何父容器元素。

“on”方法取代了旧的“live”和“delegate”方法，以及“绑定”本身。

Answer 2

使用jQuery.live方法为现在和将来与当前选择器匹配的所有元素附加事件处理程序