不确定.on（）方法

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

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

不足之处是设置.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元素？

我solituion是：

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

来源

2012-06-11 Sorin Buturugeanu

注意有关'$（文件）。就绪（函数（）{}）;'包装，即为文档就绪事件添加事件处理程序，以便在该事件触发之前，内部代码不会运行。这可以确保页面在脚本运行之前完全呈现，而不是在JavaScript页面呈现期间解析并运行的时候。 –

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

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

这使处理程序上<body>但它捕获的事件泡沫和调用处理程序时，目标元素与选择器（第二个参数）相匹配。

该处理程序不必去<body>;它可以是您的<div>的任何父容器元素。

“on”方法取代了旧的“活”和“委托”方法，以及“绑定”本身。

来源

2012-06-11 15:35:57 Pointy

'on'超负载是一个坏主意的另一个原因。正是出于这个原因，我总是使用'delegate'来代表授权，'on'（或其中一个捷径）代表不授权。 –

@ T.J.Crowder是的，我真的不明白这是什么意思。 – Pointy

我认为这里重要的一点是它需要在某个地方附加事件，并且DOM中CLOSEST可能的位置是理想/最好的地方，所以带有ID的DIV插入不存在的元素会是最好的。 +1，因为OP似乎不明白对不存在的元素的附加依然没有附加。 –

-2

使用jQuery.live method附加的事件处理程序的当前选择现在匹配这，所有的元素和未来

来源

2012-06-11 15:53:31 Nayjest

1.7版引入的“.on（）”方法取代了” .L ive（）“方法。的确，“.live（）”本身在很久以前被“.delegate（）”所取代。 – Pointy

不确定.on（）方法

回答

相关问题