Question

我想在点击后禁用并启用该按钮的点击事件。隐藏和显示作品。 Unbind也有效，但重新绑定不起作用。禁用该按钮后，无法再次单击该按钮。我在这做错了什么？

<div style="display: inline-block;">
  <a href="#" id="btnSubmit" class="icon icon-repeat" aria-hidden="$test.get("test")},${test.get("group")}">
    <i class="fa fa-repeat"></i>
  </a>
</div>

我的脚本如下。我想在成功收到回复后重新启用click事件：

<script type="text/javascript">
    $('.icon-repeat').on('click', function () {
        console.log("The button is clicked")
        $.ajax({
            type: 'GET',
            url: '${createLink(action: 'test')}',
            data: {test: test},
            dataType: 'text',
            beforeSend: function () {
            },
            success: function (response) {
                $('.flashMessage').html(response);

            },
            fail: function (response) {
            }
        });
    });
</script>

Answer 1

首先，请勿使用bind()或unbind()。他们不久前被弃用了。请改用on()和off()。

您的实际问题是您正在尝试创建事件处理程序而不指定在该事件下应执行的逻辑。

更好的方法是在自己的函数中定义逻辑，可以更容易的方式添加/删除：

function iconRepeatHandler() {
  $('.icon-repeat').off('click');

  $.ajax({
    type: 'GET',
    url: '${createLink(action: 'testAction')}',
    data: {
      test: test
    },
    dataType: 'text',
    beforeSend: function() {},
    success: function(response) {
      $('.icon-repeat').on('click', iconRepeatHandler);
    },
    fail: function(response) {}
  });
}

$('.icon-repeat').on('click', iconRepeatHandler);

Answer 2

除了@Rory的答案之外，您还可以尝试另一种方法。切换类并基于绑定事件处理程序：

＆＃13;

$('.icon-repeat.active').on('click', function () {
    console.log("The button is clicked")
    var elem = $(this);
    elem.removeClass("active");
    // document.getElementById("btnSubmit").hidden = true
    $.ajax({
        type: 'GET',
        url: '${createLink(action: 'testAction')}',
        data: {test: test},
        dataType: 'text',
        beforeSend: function () {
        },
        success: function (response) {
                elem.addClass("active");
            // document.getElementById("btnSubmit").hidden = false
        },
        fail: function (response) {
        }
    });
});

＆＃13;

仅将事件绑定到具有active and icon-repeat类的元素。在处理程序中，删除active类并成功添加该类。

在JQuery中绑定和取消绑定按钮单击事件

2 个答案: