'Undelegate single event

I am having trouble stopping a click event on a dom element in a UL, essentially in the itemClicked method I want to undelegate the click event on the single element. When an item in a list is clicked, however that item still fires a click event despite have the none value. Is there a way to use undelegate for just the individual element clicked? I am at a loss as to why and any help is greatly appreciated.

App.Views.AttributeSelectorView = Backbone.View.extend({

  itemClicked: function (event) {
    var $target = $(event.target);
    this.trigger('itemClicked', $target.data('attr'), $target.text());

    this.undelegateEvents();
  }, 
  events: {
    'click [role=menuitem]': 'itemClicked'
  }
});   


 attributeSelectorView.on('itemClicked', function(attribute, display){
    // .remove attribute
    query.add({
      attribute: attribute,
      display: display
    }, {
      merge: true
    });
  });
javascriptjquerycssbackbone.jsbackbone-events


Solution 1:[1]

try using stopListening, it Tell an object to stop listening to events.

itemClicked: function (event) {
    var $target = $(event.target);
    this.trigger('itemClicked', $target.data('attr'), $target.text());

    this.stopListening();
  }

Solution 2:[2]

You are setting the pointer-events attribute in the click handler itself. The click event has already happened by the time you change its target element's style.

You need to set the property before a click occurs for it to take effect.

Or, if you know which elements you want to ignore clicks on, you could add logic in your click handler:

itemClicked: function(e) {

  if(!shouldIgnoreThisTarget) {
    this.trigger('...')
  }
}

In many ways this is better. It brings the click behaviour into one place and reduces coupling between your CSS and JavaScript.

Solution 3:[3]

pointer-events only effects style - so it won't affect the functionality of an element (ie. javascript events).

If you want to prevent the default click behavior in javascript, you can return false from the click handler, or set event.preventDefault to true

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 StateLess
Solution 2 joews
Solution 3 Lenny Sirivong

Related Questions