jQuery - overwriting events?

Question

Hi all,

My page contains some drag-able div elements ( not jQuery UI dragable ).

Now we want to add a new feature: the user should be able to select more than one div at a time and drag these div elements without triggering the previous bound events.

Now here is my problem:

Is it possible to disable the mousedown, mousemove and mouseup event of each div as long as they are part of a selection?

So basically I want to replace the old event by a new one and afterwards restoring the original events.

Thanks for your time

---

Update:

I wrote a tiny script to test stopImmediatePropagation

jsBin demo

With the following code:

$("p").click(function(event){
  alert ( ' I am the old event ' );
});

$("a").click( function()
{

   $("p").click(function(event){
     event.stopImmediatePropagation();
     alert ( ' I am the new event ' );
   });


return false;
});

It does not work as event.stopImmediatePropagation(); is called after the first event. So the out put is:

I am the old event

I am the new event

Answer 1

You could take a look at event.stopImmediatePropagation().

See here in the jQuery docs

Basically you make one function optionally block the other functions from running - you don't need to remove and rebind the functions.

---

Here's your code from JSBin that I've modified to make it work. It's a bit hacky and probably not very efficient, but it works!

$("p").click(function(event){
  alert ( ' I am the old event ' );
});

$("a").click( function() {
  $("p").each(function() {
    var $t = $(this);
    var events = $t.data("events");
    $t.unbind('click');
    $t.click(function(event){
      event.stopImmediatePropagation();
      alert ( ' I am the new event ' );
    });
    for (var i = 0, l = events.length; i < l; ++i) {
      $t.click(events[i]);
    }
  });
  return false;
});

Answer 2

Can't you just unbind() the event?

See the jQuery docs