2

私のコードでは、jquery を使用して要素をページに追加し、「クリック」イベントを追加しています。コードは次のとおりです。

$('.photosItem').mouseover(function() {
        // Remove all existing comment buttons
        $('.reelPhotoPageCommentLink').remove();
        // Add a comment button
        var commentButton = "<div class='reelPhotoPageCommentLink'>";
        commentButton += "Comment";
        commentButton += "</div>";
        $(this).prepend(commentButton);
        // Add click event to comment button
        $('.reelPhotoPageCommentLink').click(function() {
            $('#editPopupForm').remove();
            // Get photo id
            var photoID = $(this).parent().attr('photo_id');
            var url = "get_photo_comment_form/" + photoID;
            $.ajax({ 
                url: url,
                type: "POST",
                success: function(data) {
                    // Add item after header
                    $('#header').after(data);
                }
            });
        });
    });

そのため、「photosItem」クラスの写真にカーソルを合わせると、「コメント」ボタンが表示されます。ボタンをクリックすると、コメント ボックスが表示されます。これは Firefox では問題なく動作しますが、Chrome では問題が発生しており、クリック イベントを取得していないようです。ホバーするとコメントボタンが追加されますが、クリックしても何も起こりません。どの段階でもコンソールにエラーはありません。

$('.reelPhotoPageCommentLink').click(function() {の後にconsole.logを追加したところ、表示されず、クリックイベントが無視されているようです。

どうすればこれを機能させることができるか、誰にもアイデアがありますか? Firefox では問題なく、警告もエラーもありません。

ありがとう！

4

3 に答える 3

4

動的に DOM に追加.reelPhotoPageCommentLinkした場合、つまり DOM のロード後にデリゲート イベント ハンドラが必要です。

$('.photosItem').on('click', '.reelPhotoPageCommentLink', function() {

});

あなたのコードは一部のブラウザーで動作していますが、上記は正しい手順です。

click上記のハンドラー コードをイベントの外側に配置した方がよいでしょうmouseover。別のイベント内で任意のイベントをバインドすることはお勧めできません。

完全なコードは次のようになります。

// Add click event to comment button

 $('.photosItem').on('click', '.reelPhotoPageCommentLink', function() {
    $('#editPopupForm').remove();
    // Get photo id
    var photoID = $(this).parent().attr('photo_id');
    var url = "get_photo_comment_form/" + photoID;
    $.ajax({ 
        url: url,
        type: "POST",
        success: function(data) {
            // Add item after header
            $('#header').after(data);
        }
    });
});

$('.photosItem').mouseover(function() {
    // Remove all existing comment buttons
    $('.reelPhotoPageCommentLink').remove();
    // Add a comment button
    var commentButton = "<div class='reelPhotoPageCommentLink'>";
    commentButton += "Comment";
    commentButton += "</div>";
    $(this).prepend(commentButton);
});
于 2012-06-11T16:23:14.483 に答える
1

マウスオーバーにイベントハンドラーをアタッチするのは悪い考えのようです。おそらく、DOMの上位レベルでイベントハンドラーをアタッチし、動的に追加されたコンテンツを処理できるデリゲートイベントプログラミングモデルを使用する必要があります。例えば

$('.photosItem').on('click', '.reelPhotoPageCommentLink', function(e) {

});
于 2012-06-11T16:25:23.783 に答える
0

結局これで諦めました。

代わりに、ページの読み込み時にクリック イベントでボタンを生成しましたが、非表示のままにしました。ロールオーバーは、ボタンを生成するのではなく、ボタンを表示します。

コードパラドックスとマレボレンスの助けに感謝します。また、jsfiddle について知っておくと便利です。また使用すると思います。

于 2012-06-15T12:39:00.377 に答える