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

Question

Here is the code to add event

   $(document).on({
      click: function() {
        $(this).hide();
        $(\'#form_name\').removeClass(\'hide\');
                 


        

Answer 1

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

Answer 2

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

Answer 3

Try this.

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

Answer 4

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

Answer 5

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

Answer 6

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.