Question

当我在控制台中包含jQuery并对Google.com运行此代码段时，应该发生的是所有锚元素旁边都会出现编号标签。哪个工作正常。

但是当你点击这些标签时，它应该就像你点击了每个标签出现在左边的元素一样。他们中的大多数工作 - 重定向到新页面的直接锚点，工作正常。

但是你会看到有一个，“图像”锚点旁边的小方块图像，它不是直接锚点，而是在其上有一个点击事件，显示其他应用程序在一点点弹出 - 窗口，这就是问题所在。

如果我给它一个id并在控制台中直接使用.click()，它就能完美运行。但是使用此代码...... .click()根本就不起作用！我似乎无法确定原因。

var n = 1;
$('a').each(function(){
    //create and place numbered tag elements-- works fine
    var id = n;
    var a = $(this).offset();
    $('body').append('<span class="numTag" id="' + id + '" style="background:white; border: 1px solid black; font-size: 10pt; position:absolute; z-index:999;">' + id + '</span>');
    $('#'+id).css({left: a.left - 25, top: a.top});

    //create click event on each tag-- doesn't quite completely work
    var self = this;
    $('#'+id).click(function(){
        self.click();
    });
    n++;
});

注意，这只适用于Chrome;它是扩展的一部分。其他浏览器在这里并不重要。

Answer 1

~~我不知道为什么你的代码不起作用，但这似乎有效：~~

~~抱歉，看错了号码框！不起作用:(~~

好的，这似乎影响了问题，但没有解决它：

var n = 1;
$('a').each(function(){
    var a = $(this).offset();
    var $num = $('<span class="numTag" id="number_' + n + '" style="background:white; border: 1px solid black; font-size: 10pt; position:absolute; z-index:999;">' + n + '</span>');
    $('body').append($num);
    $num.css({left: a.left - 25, top: a.top});
    var that = this;
    $num.on('click' ,function () {
        var e = new MouseEvent('click', {
          'view': window,
          'bubbles': true,
          'cancelable': false
        });
        that.dispatchEvent(e);
    });
    n++;
});

接下来发生的事情是浏览器跟随链接（href），就像没有其他点击事件一样。我怀疑其他事件也被触发，但页面在同一时刻重新加载。

如果您将cancelable设置为true，则无效。所以我想这个事件在某个地方被取消了。但为什么不显示弹出工具提示框超出我的范围......

Answer 2

我认为这是由于绑定，click事件未附加到动态创建的项目。你应该使用on（）（以前的live（））将绑定附加到你创建的元素：

以下jQuery.On签名：

  $(document).on( eventName, selector, function(){} );

在你的情况下：

//define the span first
createdSpan = "<span class="numTag" id="number_' + n + '" style="background:white; border: 1px solid black; font-size: 10pt; position:absolute; z-index:999;">' + n + '</span>'"
//append it here
$('body').append(createdSpan)
//attache/bind the event 
$(createdSpan).on( 'click', function(){
    this.trigger( 'click' );
 });

Answer 3

以下代码“有效”（在github的首页测试 - 从Chromium控制台执行）：

// delegate event handling in one place :
$('body').on('click', '.numTag', function(){
    var anchor = $(this).data('link');
    $(anchor).click();
});

// you can use the loop counter to have a number associated with each 'a' tag
$('a').each(function(n){
    //create and place numbered tag elements
    var a = $(this).offset();

    var $numTag = $('<span class="numTag" style="background:white; border: 1px solid black; font-size: 10pt; position:absolute; z-index:999;">'+n+'</span>');
    $numTag.data('link', this);
    $numTag.css({left: a.left - 25, top: a.top});
    $('body').append( $numTag );
});

一个简单的注释：如果您将标签添加为'a'锚点的子项，则无需手动处理点击事件：

$('a').each(function(n){
    //create and place numbered tag elements
    var a = $(this).offset();

    var $numTag = $('<span class="numTag" style="background:white; border: 1px solid black; font-size: 10pt; position:absolute; z-index:999;">'+n+'</span>');
    $numTag.css({left: a.left - 25, top: a.top});
    $(this).append( $numTag );
});

Answer 4

将span附加到正在迭代的锚标记中，而不是body，对我有效。

var n = 1;
$('a').each(function(){
    var id = n;
    $(this).append('<span class="numTag" style="background:white; border: 1px solid black; font-size: 10pt; position:absolute; z-index:999;">' + id + '</span>');
    n++;
});

Answer 5

不知道为什么点击对这些特定链接也不起作用。该页面可能会取消默认行为以执行自己的js thingy。

如果我尝试在Images链接上手动触发事件，因为测试也没有任何反应，所以这不是一个绑定问题：

$('.gb_b').eq(2).click()

（$（'。gb_b'）。eq（2）是比利时google.be页面上的图片链接）

这是一种解决方法，您可以执行javascript重定向到从单击的锚点中提取的href属性，而不是调用click事件。不知道这是否适用于Chrome扩展上下文，因为我对此没有任何经验。

var n = 1;
$('a').each(function(){
    //create and place numbered tag elements-- works fine
    var id = n;
    var a = $(this).offset();
    $('body').append('<span class="numTag" id="n' + id + '" style="background:white; border: 1px solid black; font-size: 10pt; position:absolute; z-index:999;">' + id + '</span>');
    $('#n'+id).css({left: a.left - 25, top: a.top});

    //create click event on each tag-- doesn't quite completely work
    var self = this;
    $('#n'+id).click(function(){
        window.location = $(self).attr('href');
    });
    n++;
});

Answer 6

根据EranH在该问题下的评论，这个解决方案非常有效。我不能说我理解为什么，但你有它。

请注意，如果使用setTimeout（function（）{self.click（）;}，10）; 有用。我猜这与你使用点击有关内部点击。

Answer 7

我建议你改成这个更简单的代码，应该可以正常工作。我不确定为什么你现有的代码不起作用，但是你的非法id值（不能以数字开头）或者.click() DOM方法都不存在可能存在问题对象类型。在任何一种情况下，这个更简单的代码都避免了这两个问题：

$('a').each(function(index){
    var a = $(this).offset();
    var item = $('<span class="numTag" style="background:white; border: 1px solid black; font-size: 10pt; position:absolute; z-index:999;">' + (index + 1) + '</span>');
    item.css({left: a.left - 25, top: a.top});
    item.appendTo(document.body);
    var self = $(this);
    item.click(function(){
        self.click();
    });
});

来自.click（）的行为不一致？

7 个答案: