避免触发多个点击事件

Avoid triggering multiple click events

本文关键字：事件      更新时间：2023-09-26

当我单击其同级链接时，我正在尝试禁用/启用输入字段。

这是我的代码。

$('a').on('click',function(){
    var inp=$(this).siblings('input');
    inp.prop('disabled', false);
    $(this).click(function(){
        inp.prop('disabled', true);
    });
});

当我第一次单击它时，它可以正常工作，但从下次开始它将不起作用。因为这两个单击功能，触发器。我无法克服这个问题。请帮助我。

看到小提琴。

只需在每次点击时否定disabled道具即可。 elem.disabled = ! elem.disabled .

演示小提琴：http://jsfiddle.net/abhitalks/2a2ajbnb/1/

片段： 

$('a').on('click',function(){
    var $inp = $(this).siblings('input');
    $inp.prop('disabled', !$inp.prop('disabled'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="x" value="22" disabled/><a href="#">change</a>

试试这个： 

$('a').on('click',function(){
    var inp=$(this).siblings('input');
    inp.prop('disabled', !inp.prop('disabled'));
});

您可以尝试使一键式功能同时完成这两项工作，这可能更容易。否则，只需使用

$('a').off('click');


$('a').on('click', function() {
  if ($('#ib').attr('disabled') == 'disabled') {
    $('#ib').prop('disabled', false);
  } else {
    $('#ib').prop('disabled', true);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id='ib' type="text" name="x" value="22" disabled/>
<a href="#">change</a>

演示

相关文章：