How to disable the click on an icon after one click?

Question

After clicking on the icon with ids ( #prevleft and #nextright ) , an ajax function is called. During the time ajax function loads a new table, I want to disable the icon click .

HTML Code:

hrHTML='<tr><th colspan="5"><i class="icon icon-chevron-left icon-2x lr" 
style="float:left;" title="Previous Five Weeks" 
id="prevleft"></i>' +"Weekly Utilization"+'<i class="icon icon-chevron-right 
icon-2x lr" style="float:right;" title="Next Five Weeks" id="nextright" 
></i></th>
</tr>';

The table row is appended dynamically as shown above. Want to disable #prevleft and #nextright after one click.

The following line doesn't work:

$('#prevleft').prop("disabled", true);

I am new to coding, so all help is appreciated.

Answer 1

You have attached an event listener to one or more elements that do not yet exist in document . You can use event delegation, or jQuery() function to attach event to element when created.

Pass html string to jQuery() , use .find() to get "#prevleft" , #nextright selectors, attach click event using .one() , append jQuery() object to document

$(elementWherehrHTMLIsAppended)
.append(
  $(hrHTML)
  .find("#prevleft, #nextright")
  .one("click", function() {
    $(this).prop("disabled", true)
  }).end()
);

Answer 2

Just check with the version of the jquery your using, I hope that your using jquery 1.5 or below

For jQuery 1.6+

Use can use .prop() function:

$('#prevleft').prop("disabled", true);
$("#nextright").prop("disabled", true);

For jQuery 1.5 and below

You need to use .attr() and disable the icon

$("#prevleft").attr('disabled','disabled');
$("#nextright").attr('disabled','disabled');

and for re enable the icon (remove attribute entirely):

$("#nextright").removeAttr('disabled');
$("#prevleft").removeAttr('disabled');

Assuming you have an event handler on a icon, in any version of jQuery you can use the following property to check if your icon is enabled or not

if (this.disabled){
   // your logic here
}

Answer 3

Bind simple a click event when clicked on prevleft and prevright id icon.

$("body").on("click","#prevleft ,#prevright",function(){
var _this = $(this);
 $(this).prop("disabled","true");
 // ajax call code right here 

  // on ajax success function right this line
    success: function(resp){
      _this.prop("disabled","false");
    }});

})

Answer 4

You can add a class to the element and check for the class when the user clicks.

For example: 
$('#prevleft').click(function(){
    if($(this).hasClass('clicked')){
         // do nothing or return false
     }else{
          // ajax call 
          // on a successful call you can add the class using:
          $('#prevleft').addClass('clicked');
     }
});

Let me know if this is what you were asking for. This also gives you the ability to add an alert or do something if the button was already clicked. Hope this helped!

Answer 5

Try my code, this event only called when icon hasn't class 'clicked', in the first call we will add 'clicked' class to prevent this event from this time.

$('#prevleft:not(.clicked), #nextright:not(.clicked)').on('click', function(){
    $(this).addClass('clicked');
});

Hope this can help you!