jQueryのは、どのように指定された要素の後にAjaxのコンテンツをロードします

StackOverflow https://stackoverflow.com/questions/2146481

  •  23-09-2019
  •  | 
  •  

質問

私は、クラスのアドレスを持つフィールドセットした後、いくつかのAjaxコンテンツをロードする必要があります。それ以下のコードを使用すると、AJAXコンテンツで.addressの内容を置き換えます。

    $('.accordion .head').click(function() {
    $(this).next().find('.address').after().load('http://test.dev/search/view/IdDaytrip/' + $(this).attr('id') + '.html');
    $(this).next().toggle('slow');
    return false;
}).next().hide();

<div style="display: none;">
<fieldset class="address">
<!-- AJAx CONTENT GOES HERE -->
    <ol>
        <li>Stadhouderskade 78</li>
        <li> Amsterdam-Zuid</li>
        <li>020-5239666</li>
    </ol>
</fieldset>
<!-- BUT THE AJAx CONTENT NEEDS TO GO HERE -->
<span class="tags">Tags: museum</span>
</div>
役に立ちましたか?

解決

私は通常それを行うこの方法:

var clicked = $(this);
$.get('http://test.dev/search/view/IdDaytrip/' + $(this).attr('id') + '.html',
function(data){
    alert("Data Loaded: " + data);
    $(clicked).next().find('.address').after(data);
});

他のヒント

これは動作するはずです..

$('.accordion .head').click(function() {
    $next = $(this).next();
    $.get('http://test.dev/search/view/IdDaytrip/' + $(this).attr('id') + '.html',
          function(data){
                         $next.find('address').after( data );
                        }
         ).end().toggle('slow');
    return false;
}).next().hide()
実際にafterは、与えられた要素の後に追加するオブジェクトが必要です。お電話の際は、

$(this).nex().find('addresss').after()

あなたはへの参照が返されます

'address' + [content appended by `after`]

私たちはに追加するafter機能には何も与えられていないとして、のアドレスの我々はまだload$('.address')を呼び出しているようにします。

の代わりにこのスクリプトを使用します:

    $('.accordion .head').click(function() {
    $(this).next().find('.address').after($("div/>")
     .load('http://test.dev/search/view/IdDaytrip/' + 
         $(this).attr('id') + '.html'));
    $(this).next().toggle('slow');
    return false;
}).next().hide();

これはAJAXコンテンツをラップし、正しい方法でそれを表示するための新しいdivを作成します。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top