How to unbind events in jquery that were attached using one method?
<p>SUppose I have the following markup:</p>

<pre><code>&lt;div class="button"&gt;1&lt;/div&gt;
&lt;div class="button"&gt;2&lt;/div&gt;
&lt;div class="button"&gt;3&lt;/div&gt;
&lt;div class="button"&gt;4&lt;/div&gt;
</code></pre>

<p>I have the following jquery code:  </p>

<pre><code>$(".button").one('mouseenter', function() {

    console.log("A button was pressed for the first time")
    $(".button").on('mouseenter', function(){
        console.log("One button has already been pressed once")
    })

});
</code></pre>

<p>The problem is one event attaches to all four buttons. So if I mouseover over first button then again first button then everything goes fine but if I mouseover over second button after mousovering over first then one method again gets triggered. If I could do this:</p>

<pre><code>$(".button").one('mouseenter', function() {

    console.log("A button was pressed for the first time")
    $(".button").on('mouseenter', function(){
        console.log("One button has already been pressed once")
    })

    //Remove event attached with one method from all buttons

});
</code></pre>

<p>This way one method wouldn't trigger more than once. But jquery says events attached <code>on</code> method can be removed only. </p>

<p>So is there any method to unbind events in jquery that were attached using one method?</p>