7

jquery の ajax を使用してリソースからデータを取得しようとしています。次に、このデータを使用して、次のようにブートストラップ ポップオーバーを作成しようとしています。

$('.myclass').popover({"trigger": "manual", "html":"true"});
$('.myclass').click(get_data_for_popover_and_display);

データを取得する関数は次のとおりです。

get_data_for_popover_and_display = function() {
    var _data = $(this).attr('alt');
    $.ajax({
         type: 'GET',
         url: '/myresource',
         data: _data,
         dataType: 'html',
         success: function(data) {
             $(this).attr('data-content', data);
             $(this).popover('show');
         }
    });
}

何が起こっているのかというと、クリックしてもポップオーバーが表示されませんが、後で要素をホバーするとポップオーバーが表示されますが、コンテンツ (data-content属性) は表示されません。alert()をコールバック内に配置すると、success返されたデータが表示されます。

なぜこれが起こっているのですか？ありがとう！

4

2 に答える 2

15

成功のコールバックでthisは、残りの と同じ値にバインドされなくなりましたget_data_for_popover_and_display()。

心配しないで！thisキーワードは毛むくじゃらです。その値を誤って解釈することは、JavaScript でよくある間違いです。

thisへの参照を変数に割り当てて保持することで、これを解決できます。

get_data_for_popover_and_display = function() {
    var el = $(this);
    var _data = el.attr('alt');
    $.ajax({
         type: 'GET',
         url: '/myresource',
         data: _data,
         dataType: 'html',
         success: function(data) {
             el.attr('data-content', data);
             el.popover('show');
         }
    });
}

または、どこでも書いvar that = this;て使用することもできます。$(that)その他のソリューションと背景はこちら.

于 2011-11-09T15:47:05.770 に答える
6

上記の回答に加えて、 $.ajax() ドキュメントによると、 contextパラメータを使用して、追加の変数宣言なしで同じ結果を得ることができることを忘れないでください。

get_data_for_popover_and_display = function() {
    $.ajax({
         type: 'GET',
         url: '/myresource',
         data: $(this).attr('alt'),
         dataType: 'html',
         context: this,
         success: function(data) {
             $(this).attr('data-content', data);
             $(this).popover('show');
         }
    });
}
于 2012-08-31T10:13:18.210 に答える