<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>obvious solution &#8211; stoimen&#039;s web log</title>
	<atom:link href="/tag/obvious-solution/feed/" rel="self" type="application/rss+xml" />
	<link></link>
	<description>on web development</description>
	<lastBuildDate>Tue, 13 Feb 2018 08:18:15 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.0.3</generator>
	<item>
		<title>jQuery.unbind()</title>
		<link>/2011/04/05/jquery-unbind/</link>
		<comments>/2011/04/05/jquery-unbind/#comments</comments>
		<pubDate>Tue, 05 Apr 2011 08:51:08 +0000</pubDate>
		<dc:creator><![CDATA[Stoimen]]></dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[micro tutorial]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[Button]]></category>
		<category><![CDATA[Computing]]></category>
		<category><![CDATA[Event]]></category>
		<category><![CDATA[html]]></category>
		<category><![CDATA[HTTP cookie]]></category>
		<category><![CDATA[jquery]]></category>
		<category><![CDATA[jquery method]]></category>
		<category><![CDATA[Microsoft Binder]]></category>
		<category><![CDATA[obvious solution]]></category>
		<category><![CDATA[PHP]]></category>
		<category><![CDATA[possible solution]]></category>
		<category><![CDATA[RME]]></category>
		<category><![CDATA[Software engineering]]></category>
		<category><![CDATA[Technology/Internet]]></category>
		<category><![CDATA[unbind]]></category>
		<category><![CDATA[User interface]]></category>
		<category><![CDATA[Widgets]]></category>

		<guid isPermaLink="false">/?p=2240</guid>
		<description><![CDATA[Binding Problems Typically in jQuery when you bind an HTML element with some event this event is fired every time the user (client) triggers it. Thus when you&#8217;ve a click event attached on a button you can click it as many times as you want. In some rare cases this can be tricky. Let&#8217;s imagine &#8230; <a href="/2011/04/05/jquery-unbind/" class="more-link">Continue reading <span class="screen-reader-text">jQuery.unbind()</span> <span class="meta-nav">&#8594;</span></a><div class='yarpp-related-rss'>

Related posts:<ol>
<li><a href="/2009/12/30/jquery-live-vs-bind-performance/" rel="bookmark" title="jQuery live() vs bind() performance">jQuery live() vs bind() performance </a></li>
<li><a href="/2009/05/25/remove-dom-element-with-jquery/" rel="bookmark" title="Remove DOM Element with JQuery">Remove DOM Element with JQuery </a></li>
<li><a href="/2009/10/21/event-driven-programming-with-jquery-part-2-events-in-jquery/" rel="bookmark" title="Event driven programming with jQuery &#8211; (part 2). Events in jQuery.">Event driven programming with jQuery &#8211; (part 2). Events in jQuery. </a></li>
<li><a href="/2009/10/22/event-driven-programming-with-jquery-part-3-what-is-a-module/" rel="bookmark" title="Event driven programming with jQuery &#8211; (part 3). What is a module?">Event driven programming with jQuery &#8211; (part 3). What is a module? </a></li>
</ol>
</div>
]]></description>
				<content:encoded><![CDATA[<h2>Binding Problems</h2>
<figure id="attachment_2254" style="width: 460px" class="wp-caption aligncenter"><a href="http://jquery.com/" target="_blank"><img class="size-full wp-image-2254" title="jquery applications" src="/wp-content/uploads/2011/04/jquery_applications.jpg" alt="jQuery JavaScript Library" width="460" height="240" srcset="/wp-content/uploads/2011/04/jquery_applications.jpg 460w, /wp-content/uploads/2011/04/jquery_applications-300x156.jpg 300w" sizes="(max-width: 460px) 100vw, 460px" /></a><figcaption class="wp-caption-text">jQuery JavaScript Library</figcaption></figure>
<p>Typically in <a title="jQuery on stoimen.com/blog" href="/tag/jquery/">jQuery</a> when you bind an <a title="HTML on stoimen.com/blog" href="/tag/html/">HTML</a> element with some event this event is fired every time the user (client) triggers it. Thus when you&#8217;ve a click event attached on a button you can click it as many times as you want. In some rare cases this can be tricky. Let&#8217;s imagine the following scenario.</p>
<ol>
<li>The user clicks on a &#8220;vote&#8221; button.</li>
<li>Some AJAX calls are performed.</li>
<li>After a successful AJAX call you setup a cookie to deny further votes from this machine.</li>
</ol>
<p>This seems to be pretty well known scenario, but as the click event is attached to the button there is enough time to click several times on the &#8220;vote&#8221; button and to vote several times. In this case before the cookie is set the user can vote more than once.<span id="more-2240"></span></p>
<h3>Demo</h3>
<p><iframe frameborder="0" scrolling="no" src="http://stoimen.com/projects/jquery.unbind/example1.php" style="border:1px solid #ccc;width:500px"></iframe></p>
<p>So one possible solution is to unbind the click event. In jQuery terms this is done by &#8230;</p>
<h2>$.unbind()</h2>
<p>With this method you can simply unbind the &#8220;click&#8221; event or whatever event there is attached on the desired HTML element. So now in the first case we had:</p>
<pre lang="javascript">
$(document).ready(function() {
    $('input').click(function() {
        $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
               , success : function() {
                    $('p').append('You\'ve voted successfully!<br />');
               }    
        }); 
    }); 
});
</pre>
<p>Now you can replace the code above with:</p>
<pre lang="javascript">
$(document).ready(function() {
    $('input').click(function() {
        $('input').unbind();
        $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
               , success : function() {
                    $('p').append('You\'ve voted successfully!<br />');
               }    
        }); 
    }); 
});
</pre>
<p>As you can see on the demo here now the button cannot be clicked more than once.</p>
<h3>Demo</h3>
<p><iframe frameborder="0" scrolling="no" src="http://stoimen.com/projects/jquery.unbind/example2.php" style="border:1px solid #ccc;width:500px"></iframe></p>
<h2>Cookies + unbind()</h2>
<p>There is a problem however. After reloading the page the event is attached again, so the user can click on the button once more. The obvious solution is to combine both the cookie and the unbind() as shown in the following pseudo code.</p>
<pre lang="javascript">
$(document).ready(function() {
    if (cookie is not set) { 
        $('input').click(function() {
            $('input').unbind();
            $.ajax({ url : 'http://stoimen.com/projects/jquery.unbind/example1.php'
                   , success : function() {
                        $('p').append('You\'ve voted successfully!<br />');
                        set cookie
                   }    
            }); 
        });
    } 
});
</pre>
<div class='yarpp-related-rss'>
<p>Related posts:<ol>
<li><a href="/2009/12/30/jquery-live-vs-bind-performance/" rel="bookmark" title="jQuery live() vs bind() performance">jQuery live() vs bind() performance </a></li>
<li><a href="/2009/05/25/remove-dom-element-with-jquery/" rel="bookmark" title="Remove DOM Element with JQuery">Remove DOM Element with JQuery </a></li>
<li><a href="/2009/10/21/event-driven-programming-with-jquery-part-2-events-in-jquery/" rel="bookmark" title="Event driven programming with jQuery &#8211; (part 2). Events in jQuery.">Event driven programming with jQuery &#8211; (part 2). Events in jQuery. </a></li>
<li><a href="/2009/10/22/event-driven-programming-with-jquery-part-3-what-is-a-module/" rel="bookmark" title="Event driven programming with jQuery &#8211; (part 3). What is a module?">Event driven programming with jQuery &#8211; (part 3). What is a module? </a></li>
</ol></p>
</div>
]]></content:encoded>
			<wfw:commentRss>/2011/04/05/jquery-unbind/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
