javascript - AJAXは前の値を配列で返します

原文 javascript php jquery ajax

アートワークをホストするウェブサイトを作っています。アイデアは、ページが読み込まれるときにJavaScriptを実行してサーバーにクエリを実行するphpファイルを実行して、画像ファイル(artwork.jpg)の名前とIDを取得し、サムネイルとしてページに表示するというものです。

サムネイルをスクロールすると、アートワークが画面の別の部分に大きく表示され、アートワークの説明、仕様などがフェードインします。私の2番目のAJAX呼び出しを行うと、以前にマウスオーバーした画像を画面に表示し、少なくとも2つの画像にマウスオーバーするまで何もしません。

以下は、サムネイルをページに追加し、thumnbnailのIDの値を使用してフォームを作成する最初のajax呼び出しのコードです。

function getArtDescriptions()
{
    $.post('../../path/to/script/get_art.php', function(json)
    {
       if (json.art.length > 0)
        {

            $.each(json.art,function() 
            {
                    var info =  
                                 '<div class = "thumbnail_box">'
                                + '<img src = "images/thumbnails/'
                                + this['img']
                                + '"id = "'
                                + this['ID']
                                + '"> '
                                + '<form id = "art_descriptions'
                                + this['ID']
                                + '" '
                                + 'name = "art_descriptions'
                                + this['ID']
                                + '">'
                                + '<input type = "hidden" id = "descriptions" name = "descriptions" value = "'
                                + this['ID']
                                + '"></form>'
                                + '</div>';

            });

        }
        }, 'json');

}


そして、これは私に問題を引き起こしている2回目のAJAX呼び出しを行うために使用しているコードです:

setTimeout(function get_id()
{

    var tooltipTimeout;

    $(".thumbnail_box img").on("mouseenter", function()
    {
        tooltipTimeout = setTimeout(details(this.id),0);
        console.log(this.id);

    });
    $(".thumbnail_box img").on("mouseleave", function()
    {
        hideTooltip();
    });

function hideTooltip()
    {
        clearTimeout(tooltipTimeout);
        $(".description").fadeOut().remove();
    }
}, 800);



//GRAB DESCRIPTIONS FROM DATABASE AND 
function details(art)
{
    var formname = "#art_descriptions"+art;
    var filename = '../../file/path/to/script/get_descriptions.php';

    //console.log($(formname).serialize());

    $(".thumbnail_box img").on("mouseenter", function()
    {
        $.post(filename, $(formname).serialize(), function(json)
        {
         if (json.descriptions.length > 0)
         {
          //MAKE SURE TO EMPTY OUT DIV CLASSES FOR EACH TAB

            $(".description").empty();

            $.each(json.descriptions,function() 
            {
                    console.log("art method"+this['ID']);
                    $(".description").append(this['description']+this['ID']).hide().fadeIn("fast");
            });

        }
        }, 'json');
    });
};


console.log(this['ID'])メソッドでget_id()を実行すると、コンソールに正しい値が表示されますが、detailsメソッドでconsole.log("art method"+this['ID']を実行すると、前にスクロールしたサムネイルのIDと同じ値が表示されます。この問題についての洞察をいただければ幸いです。

setTimeout()の使用と関係がありますか?メソッドのタイムアウトを指定しないと、コードは実行されません。たとえば、ページを読み込んでから、IDが14で13の画像をスクロールすると、コンソールに次のように表示されます。

14

13  
art method 14
答え
問題は、同じイベントをさらに追加することです。最初のmouseenterイベントが発生すると、詳細関数が呼び出され、別のmouseenterイベントが追加されます。したがって、以降の呼び出しでも同じことが行われます。この例は、http://jsfiddle.net/6qre72fk/で確認できます。

var counter = 0;

$('#container1').on('mouseenter', function(){
  $('#container2').text('First mouseenter');
    appendingAnotherMouseEnter();
});

function appendingAnotherMouseEnter(){
  $('#container1').on('mouseenter', function(){
    $('#container2').text(counter);
    counter++;
  });
}


追加されたすべてのmouseenterイベントにより、カウンターが数回インクリメントされる様子を確認できます。
関連記事

javascript - Webサイト外でのAPI呼び出しを防ぐ方法[重複]

javascript - QML / JavascriptからAmazon AWSサービスにアクセスする

javascript - カスケードされた選択ボックスでデータベースからデータをフェッチする

javascript - mouseenterでのポップオーバー遅延表示(Angularjs)

javascript - Apache Thriftでの一般的なエラー処理

javascript - cs.js-同時に1つの線のみを表示します(複数線グラフ)?

javascript - jQueryスピン関数-画像クリック時に20%スピンを指定しますか?

javascript - ウェブサイトページへのリンクをチェックしたら、2つのドロップダウンオプションを作成する方法

javascript - 剣道ウィンドウのコンテンツURLからクエリ文字列を取得する

javascript - ラジオボタンのng-modelをtrue / falseに設定(オン/オフ)