blocks|key|605952|text|使用一个。http://api.jquery.com/one/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|605953|$(+".button"+).one(+'click',+function(){
++++alert(+'....'+)
});|code-block|syntax|javascript|605954|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/one/^0|5|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Use one.
<a href="http://api.jquery.com/one/" rel="nofollow noreferrer">http://api.jquery.com/one/</a>

<pre><code>$( ".button" ).one( 'click', function(){
 alert( '....' )
});
</code></pre>

blocks|key|389953|text|我认为没有必要添加两次函数。但是，如果必须这样做，您可以将return+false添加到其中一个函数中。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|389954|$('.button').click(
++++function(){
+++++++return+false;
+++++++alert('here');
});
$('.button').click(
++++function(){
+++++++alert('here');
});​|code-block|syntax|javascript|389955|entityMap^0|T|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

I think there is no point to add function twice. However if you have to then you can do add <code>return false</code> to one of the function.

<pre><code>$('.button').click(
 function(){
 return false;
 alert('here');
});
$('.button').click(
 function(){
 alert('here');
});​
</code></pre>

blocks|key|389974|text|如果.one()确实是您想要的(在它被触发一次之后删除事件处理程序)，那么我相信这就是正确的答案。如果没有，可以先解绑事件，然后再绑定：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|389975|var+myEventHandler+=+function+()+{alert('hello')};
$('a').unbind('click',+myEventHandler);
$('a').bind('click',+myEventHandler);|code-block|syntax|javascript|389976|应该行得通。|389977|编辑:由于此回复不断获得选票，我将添加另一个(在大多数情况下更好)解决方案，该解决方案至少在OP的情况下有效。在处理动态添加的内容时，只需在父元素上使用jQuery的on()，而不是直接在元素上应用事件处理程序。|389978|http://api.jquery.com/on/|389979|entityMap|0|LINK|mutability|MUTABLE|url^0|2|6|0|0|0|2B|4|0|0|P|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|10|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|11|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|Q|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|P]]]]

If <code>.one()</code> is in fact what you're after (removing the event handler after it has been triggered once) then I believe that's the correct answer. If not, you can unbind the event before binding it:

<pre><code>var myEventHandler = function () {alert('hello')};
$('a').unbind('click', myEventHandler);
$('a').bind('click', myEventHandler);
</code></pre>

Should work.

Edit: since this reply keeps getting up votes, I'll add another (better in most cases) solution that will work at least in the OP's case. When dealing with dynamically added content simply use jQuery's <code>on()</code> on a parent element instead of applying the event handler directly on the element. 

<a href="http://api.jquery.com/on/" rel="noreferrer">http://api.jquery.com/on/</a>

blocks|key|389995|text|要使事件仅触发一次，请仅绑定它们一次。动态添加元素时，使用on()将事件处理程序绑定到父元素|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|389996|查看此jsfiddle|389997|<div+id="container">
+Paragraph+#1
</div>

<div>
+<button+id="add">Add+Elements</button>
</div>

<script+type="text/javascript">
+var+n+=+1;
+$('#add').click(function()+{
+++$('#container').append('Paragraph+#'+%2B+%2B%2Bn+%2B+'');
+});
+$('#container').on('click',+'P',+function()+{
+++alert($(this).text());
+});
</script>|code-block|syntax|javascript|389998|请注意事件处理程序是如何只向on()注册一次的。动态添加元素的代码不注册事件处理程序。|389999|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/on/|1|http://jsfiddle.net/HUG2d/^0|T|4|T|4|0|0|3|8|1|0|0|E|4|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|H|3|I|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|19|8|@$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

To have the events triggered only once, bind them only once. When dynamically adding elements, bind the event handler to the parent element using <a href="http://api.jquery.com/on/" rel="noreferrer"><code>on()</code></a>:

See this <a href="http://jsfiddle.net/HUG2d/" rel="noreferrer">jsfiddle</a>:

<pre><code>&lt;div id="container"&gt;
 &lt;p&gt;Paragraph #1&lt;/p&gt;
&lt;/div&gt;

&lt;div&gt;
 &lt;button id="add"&gt;Add Elements&lt;/button&gt;
&lt;/div&gt;

&lt;script type="text/javascript"&gt;
 var n = 1;
 $('#add').click(function() {
 $('#container').append('&lt;p&gt;Paragraph #' + ++n + '&lt;/p&gt;');
 });
 $('#container').on('click', 'P', function() {
 alert($(this).text());
 });
&lt;/script&gt;
</code></pre>

Note how the event handlers are registered with <code>on()</code> only once. The code that dynamically adds elements does not register the event handlers.

blocks|key|390018|text|一个小窍门可以帮助你：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|390019|jQuery(".button:not(.clickadded)").click(function(){

+++++alert('here');

).addClass("clickadded");|code-block|syntax|javascript|390020|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

a little trick that can help:

<pre><code>jQuery(".button:not(.clickadded)").click(function(){

 alert('here');

).addClass("clickadded");
</code></pre>

blocks|key|606110|text|这是我正在使用的一种方法，在某些方面类似于Miquel的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|606111|$.prototype.once+=+function()+{
++++var+ret+=+this.not(function()+{
++++++++return+this.once;
++++});
++++this.each(function(id,+el)+{
++++++++el.once+=+true;
++++});
++++return+ret;
};|code-block|syntax|javascript|606112|像这样使用它，|606113|$('#footer')
++++.once()
++++.click(function(){
++++++++console.log('click+the+footer');
++++});|606114|一次也支持一个参数，所以你可以有不同的类型|606115|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Here is a method I'm using, similar to Miquel's method in some ways.

<pre><code>$.prototype.once = function() {
 var ret = this.not(function() {
 return this.once;
 });
 this.each(function(id, el) {
 el.once = true;
 });
 return ret;
};
</code></pre>

Use it like this,

<pre><code>$('#footer')
 .once()
 .click(function(){
 console.log('click the footer');
 });
</code></pre>

Once also supports a parameter so you can have different types

blocks|key|606152|text|您还可以在函数关闭(‘click’)的情况下删除函数中的任何现有单击事件：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|606153|$('.button').off('click').click(function()+{
++++...
});|code-block|syntax|javascript|606154|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

You can also remove any existing click events in the function with function off('click'):

<pre><code>$('.button').off('click').click(function() {
 ...
});
</code></pre>

blocks|key|606203|text|我靠一面旗子解决了它，我知道仅仅靠一个想法不是最好的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|606204|if+(!alreadyBound)+{
+++++$('.button').bind('click',+submitEvtHandler);
+++++alreadyBound+=+true;
}|code-block|syntax|javascript|606205|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I solved it by a flag, I know it is not the best by just an idea 

<pre><code>if (!alreadyBound) {
 $('.button').bind('click', submitEvtHandler);
 alreadyBound = true;
}
</code></pre>

If I assign a handler to the OnClick event of an element twice, the handler will be executed twice. But I want to change this so even if I assign it twice, the handler will only execute one time.

Nonsensical example to demonstrate issue:

<pre><code>$('.button').click(
 function(){
 alert('here');
});
$('.button').click(
 function(){
 alert('here');
});
</code></pre>

So I've added the handler twice. Now when I click an element with that class, I'd get two alert boxes.

The question is, how do I restrict it so I would only get one alert box?

Add an OnClick handler with jQuery only once - even if called again

jQuery

如果我将一个处理程序分配给一个元素的OnClick事件两次，则该处理程序将执行两次。但是我想改变这一点，即使我给它赋值两次，处理程序也只执行一次。演示问题的无意义示例：$('.button').click(    function(){       alert('here');});$('.button').click...

问使用jQuery只添加一次OnClick处理程序-即使再次调用也是如此
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery只添加一次OnClick处理程序-即使再次调用也是如此EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery只添加一次OnClick处理程序-即使再次调用也是如此
EN