stopPropagation is not working for select2 options in IE

Question

I am trying to add a link in select2 options list. and I want to bind an event. It is working fine in chrome and firefox. But it is not working in IE(9/10/11). I tried all the alternatives, cancelbubble, returnValue But none is working.

When I click on the hyperlink with class categoryDelete It is propagating the event to li option and not even executing my custom mouseup event in IE.

I also tried this answer in stack overflow. I used templateResult for adding the link to select2 options. where as in the above link they used formatResult. Does it make any difference?

Here is my code.

    $("#ContentPlaceHolder1_tags").select2({
            dropdownParent: "#dropdownParent",
            placeholder: "Select category",
            templateResult: function (item) { return '<a href="javascript:;" class="categoryDelete"></a>' + item.text },
            escapeMarkup: function(m) { return m },
            allowClear: true,
            tags: true,
            closeOnSelect: false
        });


    // adding event for link inside select2 options li
    $(".categoryDelete").mouseup(function (event) {
            event = event || window.event;
            event.preventDefault();
            event.stopPropagation();
            alert("clicked delete link");

    });

You can also use `return false;` in your case for both `preventDefault()` and `stopPropagation()` — Tushar, Aug 12 '15 at 11:06
I also used `stopImmediatePropagation()` but no use. The thing is, it is not even triggering the custom event in IE. I even implemented `$.when().done()` in case if the event is binding before select2 is initialized. Something is wrong, I couldn't find it. — bharat, Aug 12 '15 at 11:10

score 0 · Accepted Answer · answered Aug 12 '15 at 11:16

0

Your .categoryDelete is getting generated dynamically and there is different way to add events to dynamically generated elements like one below:

$(document).on('mouseup','.categoryDelete',function (event) {
        event = event || window.event;
        event.preventDefault();
        event.stopPropagation();
        alert("clicked delete link");
});

answered Aug 12 '15 at 11:16

Guruprasad J Rao

29,410
14
101
200

What is the difference between these two implementations? – bharat Aug 12 '15 at 11:23
dynamically created elements will not take events before its creation or if it is appended in later part to DOM. So you need to attach the event to document or to its parent element so that it will listen to this event onclick of that particular element! – Guruprasad J Rao Aug 12 '15 at 11:25
Anytime.. happy coding.. :) – Guruprasad J Rao Aug 12 '15 at 11:37

stopPropagation is not working for select2 options in IE

1 Answers1