CODEWITHSUNDEEP
javascriptjquery
Siva
Siva

Reputation: 8058

How to remove $(document).on click event?

Here is the code to add event

   $(document).on({
      click: function() {
        $(this).hide();
        $('#form_name').removeClass('hide');
        $('#form_template_name')
          .attr('placeholder', $(this).text())
          .focus();
      }         
    }, '.form-template-name');

For some conditions i dont want this event to trigger. So what I tried is 

$('.form-template-name').off();
$('.form-template-name').unbind();

But nothing seems to work. Did I miss anything ?

Upvotes: 6

Views: 13488

Answers (6)

Quentin
Quentin

Reputation: 943165

An event handler is bound to an element. You can unbind an event handler from the element it is attached to, but you can't unbind it from a descendant element since that isn't where it is listening.

You can either:

  1. Examine the target property of the event object (the first argument to your event handler function) to see what element was clicked on and then return before doing anything.
  2. Bind a new event handler to the elements you want stop the event from triggering from and prevent the event from continuing up the DOM.

Upvotes: 1

Rakesh Kumar
Rakesh Kumar

Reputation: 2853

Try this.

$(document).off('click', '.form-template-name');

Upvotes: 4

ABucin
ABucin

Reputation: 956

You can also try using the event.preventDefault() functionality. It is described in more detail here: http://api.jquery.com/event.preventdefault/

Upvotes: -1

Felix
Felix

Reputation: 38102

Change your click handler to:

$(document).on({
    'click.myevent': function () {
        $(this).hide();
        $('#form_name').removeClass('hide');
        $('#form_template_name')
            .attr('placeholder', $(this).text())
            .focus();
    }
}, '.form-template-name');

then you can use .off(), with name spaced event names:

$(document).off('click.myevent', '.form-template-name');

Upvotes: 0

hsz
hsz

Reputation: 152206

You can try with:

var clickEvent = function() {
    $(this).hide();
    $('#form_name').removeClass('hide');
    $('#form_template_name')
      .attr('placeholder', $(this).text())
      .focus();
};

$(document).on({
   click: clickEvent         
}, '.form-template-name');

And unbind it with:

$(document).unbind('click', clickEvent);

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You need to pass the event to unbind to .off(), also see the use of namepsaced event names

$(document).on({
    'click.myevent': function () {
        $(this).hide();
        $('#form_name').removeClass('hide');
        $('#form_template_name')
            .attr('placeholder', $(this).text())
            .focus();
    }
}, '.form-template-name');

and

$(document).off('click.myevent', '.form-template-name');

Demo: Fiddle

Upvotes: 13

Related Questions