2

データコンテンツにデータを入力するためにajax呼び出しを行ういくつかのポップオーバー(タグ上)があります。次のコードを使用して電話をかけています。

<script type="text/javascript">
$(document).ready(function() {
    $('.withajaxpopover').bind('hover',function(){
        var el=$(this);

        $.ajax({
            type: "GET",
            url: el.attr("data-url"),
            data: el.attr("alt"),
            dataType: "html",
            success: function(data) {
                el.attr("data-content", data);
            }
        });

        console.log(el.attr("data-content"));
        el.popover('show');
    });
});
</script>

次に、次のように電話をかけます。

<a href="#" id="test1" title="blabla" class="withajaxpopover" data-url="/ajax/project">blabla</a><br><br>  
<a href="#" id="test2" title="test2" class="withajaxpopover" data-url="/ajax/ports/">hahahaha</a>

1つのリンクにカーソルを合わせると、ポップオーバーが正しく表示されますが、1つのポップオーバーが表示された後、他のポップオーバーにカーソルを合わせると、次のエラーが発生します。

Uncaught TypeError: Object [object Object] has no method 'popover' 

コンソールを見ると、その後のすべてのホバーでajaxは正しいデータを返していますが、ポップオーバーが表示されていません。私が間違っていることについて何か考えはありますか?

4

2 に答える 2

1

結局、必要なことを達成するために、他のすべての拡張機能を使用する必要がありました。参照:http ://designwithpc.com/Plugins/Hovercardは、ブートストラップポップオーバーよりもはるかに優れたajaxサポートとホバー機能を備えています。また、jsは、特定のニーズに対応するために非常に簡単に変更できます。強くお勧めします。

于 2012-06-22T23:16:05.367 に答える
1

これを試して:

$(document).ready(function() {
    $('.withajaxpopover').bind('hover',function(){
        var el=$(this);

        $.ajax({
            type: "GET",
            url: el.attr("data-url"),
            data: el.attr("alt"),
            dataType: "html",
            success: function(data) {
                el.attr("data-content", data);
                el.popover('show'); 
            }
        });
    });
});
于 2012-08-13T09:13:39.310 に答える