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 ?

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 ?

• javascript
• jquery

• You need to know that $(document).on binds to the document, not the target selector element, it applies the selector when the event occurs. You need to remove it from the same level it is attached to. – iCollect.it Ltd Commented Mar 14, 2014 at 9:32
• I couldn't find any ways to remove from same level. – Siva Commented Mar 14, 2014 at 9:40
• Arun P Johny's answer appears to work (removes any clicked element, then removes the handler on the button press), but perhaps we misunderstand your question. Please explain the desired behaviour. – iCollect.it Ltd Commented Mar 14, 2014 at 9:41
• @TrueBlueAussie It was my mistake. Indeed Arun P Johny's answer works – Siva Commented Mar 14, 2014 at 9:47

6 Answers 6

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

Try this.

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

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.

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

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

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