javascript - How to disable the click on an icon after one click? - Stack Overflow

admin管理员组

文章数量:1332389

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.

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.

• javascript
• jquery
• html
• ajax

Share Follow asked Apr 28, 2017 at 2:20 user7592363user7592363 6

• Will the <i></i> be replace by ajax function? – Henry Bui Commented Apr 28, 2017 at 2:29
• How about $('#prevleft,#nextright').off('click') ? – user2575725 Commented Apr 28, 2017 at 2:36
• @VietHuongBui no, onclick of the icon inside <i></i> an ajax function is being called. – user7592363 Commented Apr 28, 2017 at 2:48
• Are you trying to disable an element that exists in document before $.ajax() is called? – guest271314 Commented Apr 28, 2017 at 2:52
• @guest271314 After ajax is called, a new table is loaded with a new #prevleft icon. so i dont think it already exists in document. i do not want the users to click the button multiple times while the ajax is loading the table, so i want to disable the click. – user7592363 Commented Apr 28, 2017 at 4:33

 |  Show 1 more ment

5 Answers 5

Sorted by: Reset to default 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
}

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");
    }});

})

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()
);

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!

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!

本文标签： javascriptHow to disable the click on an icon after one clickStack Overflow