调用多个类锚点单击事件的按钮仅调用一个，然后给出无用的错误

Question

我编写了一个greasemonkey 脚本来自定义我浏览theawesomer.com 的方式。我想要一个小按钮，我可以单击帖子旁边的按钮将链接存储在列表中，以便我可以将列表复制并粘贴到电子邮件中并将其发送给自己以供以后查看。我在另一个版本的脚本中有一个电子邮件按钮，可以自动执行此操作，我只是将其从这篇文章中删除，因为它不相关。

问题：我有这个“全部删除”按钮，它应该使用 jquery 类选择器，为它找到的每个元素调用单击事件处理程序。单击事件会删除列表中的链接以及关联的删除链接按钮（而不是“全部删除”按钮）。然而，它只从列表中删除顶部的项目，然后抛出一个错误，指出“找不到组件”，但没有指向我的代码中的一行。谁能帮我找出问题所在以及如何解决？

// ==UserScript==
// @name           TheAwesomerLaterLink
// @namespace      theawesomer
// @include        http://theawesomer.com/*
// @include        http://www.theawesomer.com/*
// @require        https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
// ==/UserScript==

function addStyle(style)
{
    var head = document.getElementsByTagName("head")[0];
    var element = head.appendChild(document.createElement('style'));
    element.innerHTML = style;
    return element;    
}

function createLinkInList(link, thisElement) // link = original link/buy anchor, thisElement = this post's new anchor (add button)
{
    var removeButton = $(document.createElement('img'))
                        .attr('src', 'http://alphadesigns.com.au/greasemonkey/removeButton.png')
                        .attr('title', 'Remove LaterLink')
                        .attr('alt', 'Remove LaterLink')
                        .css(
                        {
                            width: '16px',
                            heigth: '16px',
                            float: 'right'
                        });

    var removeLink = $(document.createElement('a'))
                    .addClass('removeLink')
                    .attr('rel', link.parents('.post').attr('id'))
                    .attr('title', 'Remove LaterLink')
                    .css('cursor', 'pointer')
                    .append(removeButton)
                    .click(function(e)
                    {
                        GM_log('start');
                        e.preventDefault();

                        // Restore add button if on same page still
                        if($('#' + $(this).attr('rel')).length > 0)
                        {
                            var laterLink = $('#' + $(this).attr('rel')).find('.LaterLink');
                            laterLink.find('img').attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png');
                            laterLink.unbind('click').click(function(e2)
                            {
                                e2.preventDefault();
                                createLinkInList(link, laterLink);
                            });
                        }

                        // Remove from list of links
                        $(this).parent().remove();
                        GM_log('end');
                    });

    var itemLink = $(document.createElement('a'))
                   .addClass('itemLink')
                   .text(link.parent().prev('h2').find('a').text())
                   .attr('href', link.attr('href'));

    var span = $(document.createElement('span'))
                    .append(itemLink)
                    .append(removeLink)
                    .append($(document.createElement('br')));

    $('#laterLinkList').append(span);

    $(thisElement).find('img').attr('src', 'http://alphadesigns.com.au/greasemonkey/disabledButton.png');

    $(thisElement).unbind('click');
}

$(document).ready(function()
{
    // Create Links
    $('.post .topmeta a').each(function()
    {
        var link = $(this);
        if(link.attr('title') == 'Link' || link.attr('title') == 'Buy')
        {
            // Track inclusion
            var insertionPoint = $(this).parent()
                                        .siblings('.metabar')
                                        .find('.rightmetabar > span:last');

            // Check if we've already added a link for 'Link' or 'Buy' link
            if(insertionPoint.find('.LaterLink').length == 0)
            {
                newAnchor = $(document.createElement('a'))
                            .attr('rel', link.attr('href'))
                            .attr('class', 'LaterLink')
                            .attr('title', 'LaterLink')
                            .css('cursor', 'pointer')
                            .click(function(e)
                            {
                                e.preventDefault();
                                createLinkInList(link, this);
                            });

                newImage = $(document.createElement('img'))
                            .addClass('icon')
                            .attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png')
                            .attr('title', 'LaterLink')
                            .attr('alt', 'LaterLink')
                            .css(
                            {
                                width: '16px',
                                height: '16px',
                                marginRight: '3px'
                            });

                newAnchor.append(newImage);

                // Put link in metabar next to other share links
                insertionPoint.prepend(newAnchor);
            }
        }
    });

    // Create List
    var panel = $('<div id="actionPanel"><div class="tab"><ul class="tabUL"><li class="left">&nbsp;</li><li id="toggle"><a id="open" class="open">LinkLater</a><a id="close" style="display: none;" class="close">Close</a></li><li class="right">&nbsp;</li></ul></div><div id="actionPanelContent"><div class="content clearfix"><input id="removeAll" type="button" value="Remove All" /><div id="laterLinkList" class="left"></div></div></div></div>');

    // Attach panel to body
    $(document.body).not('iframe body').append(panel);

    // Attach 'remove all' function
    $('#removeAll').css({margin: '0 15px', float: 'right'})
                    .click(function(e)
                    {
                        e.preventDefault();
                        $('.removeLink').click();
                        return false;
                    });

    // Expand Panel
    $("#open").click(function(e)
    {
        e.preventDefault();
        $("#actionPanelContent").slideDown("fast");
    });    

    // Collapse Panel
    $("#close").click(function(e)
    {
        e.preventDefault();
        $("#actionPanelContent").slideUp("fast");
    });

    // Switch button from "Open" to "Close" on click
    $("#toggle a").click(function(e)
    {
        e.preventDefault();
        $("#toggle a").toggle();
    });

    // Apply stylesheet to panel
    addStyle('@import "http://alphadesigns.com.au/greasemonkey/TheAwesomerLaterLink.css";');
});

Answer 1

修改后的代码达到了我想要的效果。我没有从页面中删除“添加链接”，而是将图像更改为看起来已禁用。然后，从列表中删除链接后，我只需将每个“添加链接”图像更改为再次启用并清空列表。看来我将成为唯一使用它的人，这很合适。很遗憾地看到多次点击事件无法解决。对于任何对此脚本感兴趣的人来说，这里就是。我添加了一个 localStorage 实用程序，可以通过页面更改实现列表持久性。如果您想使用该功能，则需要编写自己的电子邮件脚本。

// ==UserScript==
// @name           TheAwesomerLaterLink
// @namespace      theawesomer
// @include        http://*theawesomer.com/*
// @require        https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js
// ==/UserScript==

if(window.top == window.self) // prevent other frames using this script
{
    function addStyle(style)
    {
        var head = document.getElementsByTagName("head")[0];
        var element = head.appendChild(document.createElement('style'));
        element.innerHTML = style;
        return element;
    }

    function hidePopup()
    {
        $('.disabledPopup').hide(500, function()
        {
            $(this).remove();
        });
    }

    function showPopup(message)
    {
        // if already visible then dont add a new one
        if($('.disabledPopup').length == 0)
        {
            var element = $(document.createElement('div'))
                            .addClass('disabledPopup')
                            .html(message)
                            .css(
                            {
                                background: '#555',
                                position: 'fixed',
                                top: '10px',
                                right: '10px',
                                padding: '10px',
                                color: 'white',
                                fontWeight: 'bold'
                            })
                            .hide()
                            .bind('click', function()
                            {
                                hidePopup();
                            })
                            .appendTo('body')
                            .show(500, function()
                            {
                                setTimeout(hidePopup, 5000);
                            });
        }
    }

    function createLinkInList(link, thisElement) // link = original link/buy anchor, thisElement = this post's new anchor (add button)
    {
        var removeButton = $(document.createElement('img'))
                            .attr('src', 'http://alphadesigns.com.au/greasemonkey/removeButton.png')
                            .attr('title', 'Remove LaterLink 1')
                            .attr('alt', 'Remove LaterLink 1')
                            .css(
                            {
                                width: '20px',
                                heigth: '20px',
                                float: 'right'
                            });

        var removeLink = $(document.createElement('a'))
                        .addClass('removeLink')
                        .attr('rel', link.parents('.post').attr('id'))
                        .attr('title', 'Remove LaterLink 2')
                        .css({cursor: 'pointer', marginLeft:'10px'})
                        .append(removeButton)
                        .click(function(e)
                        {
                            e.preventDefault();

                            // Restore add button if on same page still
                            if($('#' + $(this).attr('rel')).length > 0)
                            {
                                var laterLink = $('#' + $(this).attr('rel')).find('.LaterLink');
                                laterLink.find('img').attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png');
                            }

                            // Remove from list of links
                            $(this).parent().remove();
                        });

        var itemLink = $(document.createElement('a'))
                       .addClass('itemLink')
                       .text(link.parent().prev('h2').find('a').text())
                       .attr('href', link.attr('href'));

        var span = $(document.createElement('span'))
                        .append(itemLink)
                        .append(removeLink)
                        .append($(document.createElement('br')))
                        .append($(document.createElement('br')));

        $('#laterLinkList').append(span);

        $(thisElement).find('img').attr('src', 'http://alphadesigns.com.au/greasemonkey/disabledButton.png');
    }

    $(document).ready(function()
    {
        // Create Links
        $('.post .topmeta a').each(function()
        {
            var link = $(this);
            if(link.attr('title') == 'Link' || link.attr('title') == 'Buy')
            {
                // Track inclusion
                var insertionPoint = $(this).parent()
                                            .siblings('.metabar')
                                            .find('.rightmetabar > span:last');

                // Check if we've already added a link for 'Link' or 'Buy' link
                if(insertionPoint.find('.LaterLink').length == 0)
                {
                    newAnchor = $(document.createElement('a'))
                                .attr('rel', link.attr('href'))
                                .attr('class', 'LaterLink')
                                .attr('title', 'LaterLink')
                                .css('cursor', 'pointer')
                                .click(function(e)
                                {
                                    e.preventDefault();
                                    createLinkInList(link, this);
                                });

                    newImage = $(document.createElement('img'))
                                .addClass('icon')
                                .addClass('LaterLinkIcon')
                                .attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png')
                                .attr('title', 'LaterLink')
                                .attr('alt', 'LaterLink')
                                .css(
                                {
                                    width: '16px',
                                    height: '16px',
                                    marginRight: '3px'
                                });

                    newAnchor.append(newImage);

                    // Put link in metabar next to other share links
                    insertionPoint.prepend(newAnchor);
                }
            }
        });

        // Create List
        var panel = $('<div id="actionPanel"><div class="tab"><ul class="tabUL"><li class="left"> </li><li id="toggle"><a id="open" class="open">LinkLater</a><a id="close" style="display: none;" class="close">Close</a></li><li class="right"> </li></ul></div><div id="actionPanelContent"><div class="content clearfix"><div style="float:right;width:145px;text-align:left;"><a id="emailList" style="background:url(http://alphadesigns.com.au/greasemonkey/bt_email.png) no-repeat left 0;cursor:pointer;padding-left:20px;">Email List</a><br/><br/><a id="removeAll" style="background:url(http://alphadesigns.com.au/greasemonkey/bt_close.png) no-repeat left 0;padding-left:20px;cursor:pointer;">Remove All</a></div><div id="laterLinkList" class="left"></div></div></div></div>');

        // Attach panel to body
        $(document.body).not('iframe body').append(panel);

        // Attach 'remove all' function
        $('#removeAll').hover(function()
                        {
                            $(this).css('background', 'url(http://alphadesigns.com.au/greasemonkey/bt_close.png) no-repeat left -19px');

                        }, function()
                        {
                            $(this).css('background', 'url(http://alphadesigns.com.au/greasemonkey/bt_close.png) no-repeat left 0');

                        }).click(function(e)
                        {
                            e.preventDefault();
                            $('#laterLinkList').empty();
                            $('.LaterLinkIcon').attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png')
                        });

        $('#emailList').hover(function()
                        {
                            $(this).css('background', 'url(http://alphadesigns.com.au/greasemonkey/bt_email.png) no-repeat left -19px');

                        }, function()
                        {
                            $(this).css('background', 'url(http://alphadesigns.com.au/greasemonkey/bt_email.png) no-repeat left 0');

                        }).click(function(e)
                        {
                            e.preventDefault();
                            //showPopup('email');

                            $.ajax(
                            {
                                url: '<removed>',
                                type: 'post',
                                data: {content: $('a.itemLink').serializeArray()},
                                complete: function(e, XHR, options)
                                {
                                    if (XHR.status == 403)
                                    {
                                        showPopup('forbidden');
                                    }
                                },
                                success: function(response)
                                {
                                    showPopup(response);
                                }
                            });
                        });

        // Expand Panel
        $("#open").click(function(e)
        {
            e.preventDefault();
            $("#actionPanelContent").slideDown("fast");
        }); 

        // Collapse Panel
        $("#close").click(function(e)
        {
            e.preventDefault();
            $("#actionPanelContent").slideUp("fast");
        });

        // Switch button from "Open" to "Close" on click
        $("#toggle a").click(function(e)
        {
            e.preventDefault();
            $("#toggle a").toggle();
        });

        // Apply stylesheet to panel
        addStyle('@import "http://alphadesigns.com.au/greasemonkey/TheAwesomerLaterLink.css";');

        // add on unload function so can save the list before user changes pages maybe?

        $(unsafeWindow).unload(function()
        {
            var list = $('#laterLinkList').html();
            unsafeWindow.localStorage.setItem('LaterLinks', list);
        });

        // Preload existing links
        var list = unsafeWindow.localStorage.getItem('LaterLinks');
        if(list != '')
        {
            $('#laterLinkList').html($(list));

            // setup removeLink events again
            $('.removeLink').click(function(e)
            {
                e.preventDefault();

                // Restore add button if on same page still
                if($('#' + $(this).attr('rel')).length > 0)
                {
                    var laterLink = $('#' + $(this).attr('rel')).find('.LaterLink');
                    laterLink.find('img').attr('src', 'http://alphadesigns.com.au/greasemonkey/addButton.png');
                }

                // Remove from list of links
                $(this).parent().remove();
            });
        }
    });    
}

Answer 2

当我需要某种自动单击行为时，我发现 JQuery .click() 方法不可靠，但 .mousedown() 方法似乎总是有效。不幸的是，您正在胡闹的网站可能不会监听 onmousedown。

这也是浏览器的差异。如果我没记错的话，例如，PC 上的 Safari 可以正常处理 .click()，但 Mac 上的 Safari 则不行。

更新 也许这是一个计时问题 - 在调用 click 方法之前尝试诸如超时之类的操作：

$('.removeLink').each(function () {
    window.setTimeout('removeIt("' + this.id + '")',10);
});
function removeIt(id) {
    $('#' + id).click();
}

Answer 3

通过 jQuery 调用所有 removeLink 单击与单独单击链接不同。您必须特别注意 this 范围/对象和事件对象。

理想情况下，应该重构代码，但简单的解决方案（与问题标题一致）是发送实际的点击事件。为此，请将： 替换

$('.removeLink').click();

为：

$('.removeLink').each ( function() {
    var clickEvent  = document.createEvent ("HTMLEvents");
    clickEvent.initEvent ("click", true, true);
    this.dispatchEvent (clickEvent);
} );