How to call jquery off method on a dynamic loaded button

Question

I have the following click event that is being fired multiple times although I click only once

$(document).on('click', '#addToList', function (event) {
     event.preventDefault();
     ...
 });

I read here you should use the off method e.g.

 $(element).off().on('click', function() {
     // function body
 });

however my jquery event is on the document since I load the control dynamically.

How do I add the off code to my event?

You must be associating multiple event handlers. Problem seems to be somewhere else. Can you show us How you are generating the element and attaching event handler? — Satpal, Jul 12 '17 at 08:34
@devc2 check my answer.. it will definitely help you.. even i had this same issue.. — SwapNeil, Jul 12 '17 at 08:44

score 3 · Accepted Answer · answered Jul 12 '17 at 08:30

3

Simply reverse it first:

$(document)
    .off('click', '#addToList')
    .on('click', '#addToList', function() { ... })

answered Jul 12 '17 at 08:30

StudioTime

score -1 · Answer 2 · edited Jul 12 '17 at 11:22

-1

You could try using

$(document).off('click', '#addToList').on('click', '#addToList', function (event) {
    event.preventDefault();
    ...
});

Firstly removing the click binding event, through the off method, and chaining it onto an on click event, rebinding the function.

edited Jul 12 '17 at 11:22

Joel

answered Jul 12 '17 at 08:36

Sheikh Azad

2 Answers2