当文档单击时删除元素，但仍然触发元素的单击事件

Remove element when document click - but still fire click event for the element

本文关键字：单击 元素 事件 文档 删除      更新时间：2023-09-26

对不起，我有麻烦试图把这个词和标题斗争。我正在使用jQuery在某些条件下删除一个元素-我也在寻找这个元素的点击。似乎在点击事件发生之前它被删除了，我已经尝试了各种各样的事情来让它工作得很好。

http://jsfiddle.net/Yr54c/
如果你注释掉第一个#icon.remove()上的小提琴它都工作得很好，但我想要的是小图标消失，如果有人点击它。我希望我说得有道理!

基本上应该发生的是，当一个单词在2-25个字符之间被选中时，它旁边会出现一个图标(div)。该图标一直保留到:


    点击后，页脚出现
  1. 点击页面的其他地方。

请记住，人们可以拖动选择单词，或者双击!
我只有jQuery 1.4.4工作太!

selectionchange.start();
document.addEventListener('selectionchange', function (event) {
    var sel = this.getSelection();
    if (sel.toString().length > 1 && sel.toString().length < 25) {
        $("#icon").remove();
        var range = sel.getRangeAt(0)
        var startNode = range.startContainer,
            startOffset = range.startOffset;
        if (range.endOffset > range.startOffset) {
            startNode = range.endContainer;
            startOffset = range.endOffset;
        }
        var boundaryRange = range.cloneRange();
        boundaryRange.collapse(false);
        boundaryRange.insertNode($('<div id="icon" data="' + sel + '"></div>')[0]);
        boundaryRange.setStart(startNode, startOffset);
        boundaryRange.collapse(true);
    }
});
$("#icon").live("touchend click", function(e) {
    $("#footer").remove();
    $("body").append("<div id='footer'><div id='footer-inner'><p></p></div></div>");
    $("#icon").remove();
    $("#footer-inner p").html('<div id="footer-close">Close this bar</div>');
});

文档上的selectionchange事件当前首先触发，并在其上的click事件被触发之前删除#icon。不要删除selectionchange上的图标，而是在#icon元素之外的单击事件上删除它。例如，将#icon上的单击侦听器替换为:

$(document).bind("click", function (e) {
    if(e.target.id=="icon")
    {
       $("#footer").remove();
       $("body").append("<div id='footer'><div id='footer-inner'><p></p></div></div>");
       $("#footer-inner p").html('<div id="footer-close">Close this bar</div>');
    }
    $("#icon").remove();
});

实例:http://jsfiddle.net/Yr54c/3/

在DOM上创建元素之前调用#图标上的事件绑定。所以你需要在代码的这一行之后调用这个方法:

boundaryRange.insertNode($('<div id="icon" data="' + sel + '"></div>')[0]);
bindEvent();  // something like this

function bindEvent(){
    $("#icon").live("touchend click", function(e) {
        $("#footer").remove();
        $("body").append("<div id='footer'><div id='footer-inner'><p></p></div></div>");
        $("#icon").remove();
        $("#footer-inner p").html('<div id="footer-close">Close this bar</div>');
    });
}

看起来你的问题是每次"selectionchange"事件被触发时(通过调用$("#icon").remove()然后添加一个新的)，你都创建了一个新的图标元素，但是你只绑定了一次点击处理函数，当代码第一次运行时。这是因为click和touchend绑定发生在selectionchange处理程序之外。

要解决这个问题，你应该绑定一个新的触摸和点击处理函数到新的图标元素，每次你创建一个，或者(这是更好的做法，IMO)绑定点击处理函数到包含#图标的元素，通过使用

$(".cool").on("click", "#icon", (handler));
相关文章：