Question

点击带有ID（#prevleft和#nextright）的图标后，会调用ajax函数。在ajax函数加载新表的过程中，我希望disable icon click。

HTML代码：

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>';

如上所示，动态追加表格行。要在一次点击后停用#prevleft和#nextright。

以下行不起作用：


$（'＃prevleft'）。prop（“disabled”，true）;

我是编码的新手，所以非常感谢所有的帮助。

Answer 1

您已将事件侦听器附加到document中尚不存在的一个或多个元素。您可以使用事件委派或jQuery()函数在创建时将事件附加到元素。

将html字符串传递给jQuery()，使用.find()获取"#prevleft"，#nextright个选择器，使用click附加.one()个事件}，将jQuery()对象附加到document

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

Answer 2

只需查看您使用的jquery版本，我希望您使用jquery 1.5或更低版本

对于jQuery 1.6 +

使用可以使用.prop()功能：

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

对于jQuery 1.5及更低版本

您需要使用.attr()并停用图标

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

并重新启用图标（完全删除属性）：

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

假设您在图标上有一个事件处理程序，在任何版本的jQuery中，您都可以使用以下属性来检查您的图标是否已启用

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

Answer 3

单击prevleft和prevright id图标时绑定简单的点击事件。

$("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

您可以向元素添加一个类，并在用户单击时检查该类。

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

如果这是你要求的，请告诉我。这也使您能够添加警报或执行某些操作（如果已单击该按钮）。希望这有帮助！

Answer 5

尝试我的代码，此事件仅在图标未被“点击”类时调用，在第一次调用中，我们将添加“clicked”类以防止此时此事件发生。

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

希望这可以帮到你！

如何在单击后禁用单击图标？

5 个答案: