How to execute Jquery code only once??

Question

I have one jquery method and i used call that method on click of a button . So in that code i have one line " $("#loadingMessage").css('padding-top','6%'); " i need this line execute only once when we call that method first time,later that i gone this line .

So please help me to find one way

the entire method script is below

$('#SearchButton').click(function() {                 
         $(".spinner").css('visibility','hidden');

         $("#loadingMessage").css('padding-top','6%'); //I want this line execute only once, i mean first time

         loaderStart();
         document.getElementById('loadinggif3').style.display = "block";
         $("#loadinggif3").show();
         $(".col-sm-9").css('visibility','hidden');
          var str = $('#SearchText').val();
          str = str.trim();
         if(str=="") return false;
        )};

Solution 1

Use jQuery .one(). When using .one() method, the event handler function is only run once for each element.

$('#SearchButton').one("click", function () {
    $("#loadingMessage").css('padding-top', '6%');
});

$('#SearchButton').click(function () {
    $(".spinner").css('visibility', 'hidden');

    loaderStart();
    document.getElementById('loadinggif3').style.display = "block";
    $("#loadinggif3").show();
    $(".col-sm-9").css('visibility', 'hidden');
    var str = $('#SearchText').val();
    str = str.trim();
    if (str == "") return false;
});

Solution 2

Use a boolean as a global variable, like

var flag = true;

Now, set the condition before the execution, Like

if(flag){  
   $("#loadingMessage").css('padding-top','6%');  
   flag=false;  
}

Solution 3

If you want to restrict #SearchButton click event to fire only once, use .one method

$('#SearchButton').one('click', function() {
  ...
});

Solution 4

If you have to run only once a generic function without a particular event binding then use this.

$(document).one('ready', function(){
   // your code
   $("#id").on("click", function() {
        // other code
   });
});

Useful if inside a function that is called many times (prevents onclick event from beein fired many times)

Solution 5

quick and 'dirty' solution:

$.first_time = true;
$('#SearchButton').click(function() {                 
    if($.first_time == true) $("#loadingMessage").css('padding-top','6%');
    $.first_time = false;
});

some explanation: you need a global jQuery variable here ($.first_time in this example), so that it's still known inside the anonymous function of the click event.

View more solutions

Comments

[low_rents]

i'd rather work it out with conditional statements than binding two event handlers on the same element.

[Syed]

@frosdqy how can we apply this technique in this case: stackoverflow.com/questions/39435451/…