stopPropagation 不适用于 IE 中的 select2 选项

Question

我正在尝试在 select2 选项列表中添加一个链接。我想绑定一个事件。它在 chrome 和 firefox 中运行良好。但它在 IE (9/10/11) 中不起作用。我尝试了所有替代方案，cancelbubble，returnValue 但没有一个有效。

当我单击带有categoryDelete 类的超链接时，它会将事件传播到 li 选项，甚至没有在 IE 中执行我的自定义 mouseup 事件。

我还在堆栈溢出中尝试了this answer。我使用 templateResult 将链接添加到 select2 选项。在上面的链接中，他们使用了formatResult。有什么区别吗？

这是我的代码。

    $("#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");

    });

Answer 1

您的.categoryDelete 正在动态生成，并且有不同的方法可以将事件添加到动态生成的元素中，如下所示：

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