Question

对不起，我在试图把这个说成文字并且在标题上挣扎时遇到了麻烦。我在某些条件下使用jQuery删除元素 - 我也在寻找这个元素的点击。它似乎在点击事件触发之前被移除，我已经尝试了各种各样的事情以使其运行良好。

http://jsfiddle.net/Yr54c/
如果你在那个小提琴上注释掉第一个＃icon.remove（）它一切正常但我想要的是如果有人点击它就会消失小图标。我希望我有道理！请参阅演示文稿的小提琴。

基本上应该发生的事情是当在2-25个字符之间选择一个单词时，旁边会出现一个图标（div）。该图标一直保留到：

点击它 - 并显示页脚。
点击页面上的其他位置。

请记住，人们可能会拖动选择单词，或双击！
我只有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>');
});

Answer 1

在DOM上创建元素之前调用#icon上的事件绑定。因此，您需要在代码中的这一行之后调用该方法：

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>');
    });
}

Answer 2

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

要解决此问题，您应该在每次创建新图标元素时绑定新触摸并单击处理函数，或者（这是更好的做法，IMO）将单击处理函数绑定到包含该元素的元素#icon，使用

$(".cool").on("click", "#icon", (handler));

Answer 3

首先触发文档上的selectionchange事件并在触发点击事件之前删除#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/

的实例

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

3 个答案: