javascript - .click() 的行为不一致？

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；它是扩展的一部分。其他浏览器在这里无关紧要。

score 1 · Accepted Answer

From EranH's comment under the question, this solution works perfectly. I can't say I understand why, but there you have it.

Notice that if you use setTimeout(function() { self.click(); }, 10); it works. I'm guessing it has something to do with you using click inside click.

score 0 · Accepted Answer

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

score 0 · Accepted Answer

Don't know why the click doesn't work on those particular links either. The page probably cancels out the default behaviour to do its own js thingy.

If I try to fire the event manually on the Images link as a test nothing happens either, so this is not a binding issue:

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

($('.gb_b').eq(2) is the Images link here on my Belgian google.be page)

Here is a workaround, instead of calling the click event you can do a javascript redirect to the href attribute pulled from the clicked anchor. Don't know if this works in a chrome extension context as I don't have any experience with this.

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

score 0 · Accepted Answer

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

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

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

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不起作用。所以我猜这个活动在某个地方被取消了。但是为什么它不显示弹出工具提示框超出了我的范围...

score 0 · Accepted Answer

以下代码“有效”（在 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 );
});

score 0 · Accepted Answer

我认为这是由于绑定，单击事件未附加到动态创建的项目。您应该使用 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' );
 });

score -1 · Accepted Answer

我建议您更改为应该可以正常工作的更简单的代码。我不确定为什么您现有的代码不起作用，但是您的非法 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();
    });
});

javascript - .click() 的行为不一致？

7 回答 7

Related

Reference