2

I've got a link that needs to be clicked situated inside a div that already has a function on click which I've emulated here.

Now in my code, the link that needs to be clicked has class remove-tag which is injected on running the script to the outer element search-box.

Referencing the earlier SO question of:

jquery: keep <a> link clickable in clickable div

I applied similar logic to my code here:

$('.remove-tag').click(function(event){
    event.stopImmediatePropagation();
    $(this).parent().remove();
});

I also tried event.stopPropagation();, but this doesn't work and clicking on the link still performs the function of the outer div which is technically a drop down sort of system.

Community
  • 1
  • 1
Newtt
  • 6,050
  • 13
  • 68
  • 106
  • Try just plain `event.stopPropagation()` – Liftoff Feb 05 '14 at 07:32
  • @David, I tried that too. Didn't work. I'll add it to my question. :) – Newtt Feb 05 '14 at 07:33
  • I don't see the element with the class `.remove-tag` in your fiddle... – Liftoff Feb 05 '14 at 07:38
  • @David check line 15 in the JavaScript section. It's injected on click. – Newtt Feb 05 '14 at 07:40
  • 2
    You need a [delegated handler](http://api.jquery.com/on/) but right now I am too stupid to produce a JSFIDDLE. It should be `$('.search-box').on("click", ".remove-tag", function (){}`. ;) – loveNoHate Feb 05 '14 at 07:44
  • The problem is not the stopPropagation() then, as that works just fine: http://jsfiddle.net/V3Dq7/ – Liftoff Feb 05 '14 at 07:48
  • Your method is not even running! If you put an alert message in there, like `alert("test")`, it is not called when I click on the x. – Liftoff Feb 05 '14 at 07:50

3 Answers3

3

Ok, here we go:

$('.search-box').on('click', '.remove-tag', function(event){
    event.stopPropagation();
    $(this).parent().remove();
});

JSFIDDLE: http://jsfiddle.net/snr9D/4/

Since you are adding the element later to the DOM, you need the delegated handler, to bind the event to that.

loveNoHate
  • 1,549
  • 13
  • 21
1

You are not binding the click event to the .remove-tag elements when they are created.

Just run this in the method where you append the elements to the body:

$('.remove-tag').click(function(event){
    event.stopImmediatePropagation();
    $(this).parent().remove();
});

JSFiddle

Liftoff
  • 24,717
  • 13
  • 66
  • 119
1

The stopImmediatePropagation is working fine, the real problem is because your click event handler is not fired.

Is not fired because you are adding dynamically your elements to the DOM.

In this case you have to use event delegation with jQuery on.

Ref:

The majority of browser events bubble, or propagate, from the deepest, innermost element (the event target) in the document where they occur all the way up to the body and the document element. In Internet Explorer 8 and lower, a few events such as change and submit do not natively bubble but jQuery patches these to bubble and create consistent cross-browser behavior.

If selector is omitted or is null, the event handler is referred to as direct or directly-bound. The handler is called every time an event occurs on the selected elements, whether it occurs directly on the element or bubbles from a descendant (inner) element.

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

Code:

$('.search-box').on('click','.remove-tag',function (event) {
    event.stopImmediatePropagation();
    $(this).parent().remove();
});

Demo: http://jsfiddle.net/M3HdC/

Irvin Dominin
  • 30,819
  • 9
  • 77
  • 111