Связывание и открепление события нажатия кнопки в JQuery - PullRequest
Новая
       23

Связывание и открепление события нажатия кнопки в JQuery

0 голосов
/ 30 мая 2018

Я хочу отключить и включить событие нажатия кнопки после ее нажатия.Скрыть и показать работы.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>

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

Помимо ответа @ Rory, есть еще один подход, который вы можете попробовать.Переключай классы и на основании этого привязывай обработчик событий: 

$('.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) {
        }
    });
});

Привязать событие только к тем элементам, которые имеют класс active and icon-repeat.В обработчике удалите класс active и в случае успеха добавьте его снова.

0 голосов
/ 30 мая 2018

Во-первых, не используйте 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);
...