Question

这是我的第一篇文章，在这里我想创建一个chrome扩展，当它被按下时，它将显示可以按下的链接，使用AJAX检索的链接。它到目前为止工作，唯一的问题是它被点击任何链接，有时它出现两次甚至三次。任何人都可以解释和回答这个问题吗？

谢谢！

var links = [];
links.push("http://www.tenmanga.com/book/rss/id-16896.xml");
links.push("http://mangafox.me/rss/fairy_tail.xml");
links.push("http://feeds.feedburner.com/9gag?format=xml");

功能开始（）

function start(){
    for (var i in links)
        getXML(links[i]);
    $(document).ready(function(){
    });


}

函数getXML

function getXML(url){
    var test = $.ajax({
        type: "GET",
        url: url,
        dataType: "xml",
        success: function(xml){
            parse(xml);
bind();
        }
    });
    return test;
}

function bind(){
    $("a").click(function(e){
        chrome.tabs.create({url:$(this).attr("href")});
    });
}
function parse(xml){
    //$("#content").append();
    var title = $(xml).find('title').first().text();
    var createClickHandler = function(arg){
        return function(){ 
            open_item(arg); 
        };
    }
    $("#content").append(title+"<br>");
    $(xml).find('item').each(function(){
        var temp = document.createElement("a");
        var title = this.childNodes[1].textContent;
        var link = this.childNodes[3].textContent;
        temp.innerHTML = title;
        temp.setAttribute("href",link);
        $("#content").append(temp);
        $("#content").append("<br>");
    });
    $("#content").append("<br>");
}

从这里开始！

var start = start();

Answer 1

单击元素时多次调用click事件的唯一原因是，在其上注册了多个事件处理程序。每次你调用bind你所做的就是将事件绑定到'a'所以我猜第一个链接它的事件被触发一次，秒为两次，第三次是三次。可能不是只使用$（'a' ）属于页面中所有'a'元素的属性，您可以使用单独的ID动态地创建'a'。这必须结束这种奇怪的行为。

Answer 2

在您的点击回调中调用e.preventDefault(); e为event的{{1}}，这样事件就不会起泡，也不会触发任何其他事件。

在ajax返回后，每次成功都不应该调用bind（）。

Answer 3

而不是在每个链接上绑定，请执行以下操作：

$(document).on('click','a'
    function(e){
        chrome.tabs.create({url:$(this).attr("href")});
        return false;
    }
);

如果链接上没有其他锚点

click事件多次触发（应该是一次）

3 个答案: