Кнопка вызова нескольких событий привязки якоря класса вызывает только одно, а затем выдает бесполезную ошибку - PullRequest
0 голосов
/ 19 октября 2011

Я написал скрипт greasemonkey, чтобы настроить способ просмотра страниц theawesomer.com.Я хотел иметь маленькую кнопку, чтобы щелкнуть рядом с сообщением, чтобы сохранить ссылку в списке, чтобы я мог скопировать и вставить список в электронное письмо и отправить его себе для последующего просмотра.У меня есть кнопка электронной почты в другой версии скрипта, которая автоматизирует этот штраф, я просто удалил ее из этого поста, так как она была неактуальной.

Проблема: у меня есть эта кнопка «Удалить все», которая должна,используя селектор класса jquery, вызовите обработчик события click для каждого найденного элемента.Событие click удаляет ссылку в списке и соответствующую кнопку удаления ссылки (не кнопку «Удалить все»).Однако он удаляет только верхний элемент из списка, а затем выдает ошибку «Компонент не найден», но не указывает на строку в моем коде.Может кто-нибудь помочь мне узнать, что идет не так и как это исправить?

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

Ответы [ 3 ]

1 голос
/ 23 октября 2011

Пересмотренный код достигает того, что я хочу. Вместо того, чтобы удалить «добавить ссылку» со страницы, я просто изменяю изображение, чтобы выглядеть отключенным. Затем, удалив ссылки из списка, я просто изменяю каждое изображение «Добавить ссылку», чтобы оно снова выглядело включенным, и очищаю список. Видя, как я буду единственным, кто его использует, это нормально. Извините, что несколько событий клика не могут быть разработаны, хотя. Для всех, кто интересуется этим сценарием, вот он. Я добавил утилиту 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">&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"><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();
            });
        }
    });    
}
0 голосов
/ 19 октября 2011

Вызов всех кликов removeLink через jQuery - это не то же самое, что индивидуальный переход по ссылкам. Вы должны обратить особое внимание на область действия this и объект события.

В идеале код должен быть реорганизован, но простое решение - в соответствии с заголовком вопроса - это отправка реальных событий щелчка. Для этого замените:

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

с:

$('.removeLink').each ( function() {
    var clickEvent  = document.createEvent ("HTMLEvents");
    clickEvent.initEvent ("click", true, true);
    this.dispatchEvent (clickEvent);
} );
0 голосов
/ 19 октября 2011

Я обнаружил, что метод JQuery .click () ненадежен, когда мне нужно какое-то поведение автоматического щелчка, но метод .mousedown (), кажется, всегда работает. К сожалению, веб-сайт, на котором вы работаете, возможно, не слушает onmousedown.

Это также разница в браузерах. Если я правильно помню, Safari на ПК, например, хорошо обрабатывает .click (), но не Safari на Mac.

ОБНОВЛЕНИЕ Возможно, это проблема синхронизации - попробуйте что-то вроде тайм-аута перед вызовом метода click:

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