更新jquery中的div ID，以便脚本只能运行一次

Question

I currently have a script that I am using in my website. The goal of the script is when the user clicks the link, the javascript function will fire. This function is based off of the div id. At the end of the function I use jquery to change said div id. However, when the user clicks the link again the function still fires, even though the id has changed. What am I doing wrong? How can I get the script to only execute the first time the link is clicked?

$("#down").click(function(){
            var id = $("#down").attr("class");
            $.ajax({
              type: "POST",                                 
              url: "vote.php",                             
              data: "side=down&id=" + id,          
              success: function(){ alert("lul worked"); } 
            });
            $('.' + id + '#down').attr('id', 'down_stay');
        });

Now that you all have answered, what is the better choice, using "one" or using "unbind"?

Answer 1

Don't use click , use on . Or in your case, one :

$('#down').one('click', function() {
    // function only fires once and then is unbound.
});

Answer 2

Use $("#down").one("click", function(){}); instead to make it fire only once.

Answer 3

Try using one

$("#down").one('click', function(){

The DOM events are attached to the elements and not to the attributes.

So even if you change the attributes of the element it does not mean it is a different element.

The event will only be removed if that particular element will be removed from the DOM..

Answer 4

Use unbind() instead.

replace

$('.' + id + '#down').attr('id', 'down_stay');

with

$( this ).unbind( 'click' );