Bind and unbind button click event in JQuery

Question

I want to disable and enable a click event of the button after clicking it. Hide and show works. Unbind also works but rebinding does not works. Once the button is disabled it cannot be clicked again. What am i doing wrong here?

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

My script is below. I want to re enable the click event after I successfully receive the response:

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

Rory McCrossan · Accepted Answer · 2018-05-30 09:03:08Z

1

Firstly, don't use bind() or unbind(). They were deprecated a while ago. Use on() and off() instead.

Your actual issue is that you're attempting to create an event handler without specifying what logic should be executed under that event.

A better way to approach this would be to define the logic in its own function which can be added/removed in a much easier manner:

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

answered May 30, 2018 at 9:03

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

jenny sam Over a year ago

How can i call this function in button Click event?

Death-is-the-real-truth Over a year ago

Please let me know your resource of knowledge.I will read from there too. Amazed by your answers and depth explanation you gave...........+1

Rory McCrossan Over a year ago

@jennysam $('.icon-repeat').on('click', iconRepeatHandler); this line (repeated on load and in the AJAX callback) is what attaches the click handler.

jenny sam Over a year ago

can you edit your answer according to my implementation/

Rory McCrossan Over a year ago

@AlivetoDie thank you, that's very kind of you to say.

|

K K · Accepted Answer · 2018-05-30 09:06:21Z

0

Apart from @Rory's answer, there is another approach which you can try. Toggle the classes and based on that bind the event handler:

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

Bind the event only to those elements which has active and icon-repeat class. In the handler, remove the active class and in success add that again.

answered May 30, 2018 at 9:06

K K

18.2k4 gold badges33 silver badges39 bronze badges

6 Comments

K K Over a year ago

@jennysam yes, that's a classname

jenny sam Over a year ago

Click function is executed only if there is $('.icon-repeat').on('click', function () not $('.icon-repeat.active').on('click', function ()

K K Over a year ago

@jennysam If you can modify your code to add active class, then it will work

jenny sam Over a year ago

how can i do that?

K K Over a year ago

@jennysam add active class to the element in the html

|

Collectives™ on Stack Overflow

Bind and unbind button click event in JQuery

2 Answers 2

9 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related