Непоследовательное поведение от .click()?

Question

Когда я включаю jQuery в консоль и запускаю этот фрагмент против Google.com, должно произойти, что пронумерованные теги появляются рядом со всеми элементами привязки. Что хорошо работает.

Но при нажатии этих тегов он должен действовать так, как если бы вы нажали на элемент, каждый тег появится слева. Большинство из них работают - прямые привязки, которые перенаправляются на новую страницу, что отлично работает.

Но вы увидите, что есть квадрат квадрата квадрата рядом с якорем «Изображения», который не является прямым якорем, а имеет на нем событие клика, которое показывает другие приложения в маленькой попке -up, и это проблема.

Если я дам ему идентификатор и использую .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

Из комментария EranH по вопросу, это решение работает отлично. Я не могу сказать, что понимаю, почему, но там у вас это есть.

Обратите внимание, что если вы используете setTimeout (function() {self.click();}, 10); Это работает. Я предполагаю, что это имеет какое-то отношение к вам, используя клик внутри клика.

Answer 2

Я предлагаю вам перейти на этот гораздо более простой код, который должен работать нормально. Я точно не знаю, почему ваш существующий код не работает, но может быть проблема с вашими недопустимыми значениями id (не может начинаться с числа) или с помощью метода DOM .click(), который не существует для всех типов объектов. В любом случае, это более простой код избегает обоих этих вопросов:

$('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(); 
    }); 
}); 

Answer 3

Я не знаю точно, почему ваш код не работает, но это похоже на работу:

К сожалению, было глядя на неправильный номер окна! Не работает :(

Хорошо это, кажется, затрагивает проблему, но не решить:

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 4

Я думаю, что это связано с привязкой, событие click не привязано к динамически создаваемому элементу. вы должны использовать on() (ранее live()) для подтверждения привязки к создаваемому элементу:

Следующий jQuery.На подпись:

$(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 5

Следующий код "работает" (проверено на первой странице GitHub в - выполнен из хромовой консоли):

// 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 6

Добавление 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 7

Не знаю, почему клик не работает на этих конкретных ссылках. На странице, возможно, отменяется поведение по умолчанию, чтобы выполнить свою собственную js thingy.

Если я пытаюсь инициировать событие вручную на изображение ссылку, как тест ничего не происходит, либо, так что это не является обязательным вопросом: '. Gb_b.

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

($() экв (2) является ссылкой Изображений здесь, на моей бельгийской странице google.be)

Вот обходной путь, вместо того, чтобы называть событие click, вы можете перенаправить javascript на атрибут href, извлеченный из щелкнутого якоря. Не знаю, работает ли это в контексте расширения хром, поскольку у меня нет опыта с этим.

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