2

コンソールに 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 でのみ機能するように設計されていることに注意してください。拡張機能の一部です。他のブラウザはここでは関係ありません。

4

7 に答える 7

0

これはバインディングによるものだと思います。動的に作成されたアイテムにクリックイベントが添付されていません。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' );
 });
于 2013-10-29T10:02:02.953 に答える
0

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++;
});
于 2013-10-30T05:48:14.960 に答える
-1

正常に動作するはずの、このはるかに単純なコードに変更することをお勧めします。既存のコードが機能しない正確な理由はわかりませんが、不正な 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();
    });
});
于 2013-10-25T00:18:21.453 に答える