0

私はajaxを使用してドキュメントにいくつかのhtmlをロードしようとしています。ロードはファイルだけで機能しています。私ができないのは、jqueryセレクターを使用してロードされたhtmlにアクセスすることです。

スクリプトは次のとおりです。

$(document).ready(function(){
    $.ajax({
          url: 'header.html',
          dataType: 'html',
          success: function(data) {
            $("#header").html(data);
    });
});

HTML：

   <body>
    <div id="wrapper">
      <div id="header">
      </div><!--header end-->
    </div>
   </body>

私はこのようなhtml要素にアクセスしようとしています：

$('#bigmenu').hide();
$('#mydiv').mouseenter(function(e){
    $('#bigmenu').fadeIn(100);
});

#bigmenuおよび#mydivは動的にロードされるhtmlの要素です

ただし、ajax関数内でそれらにアクセスしようとすると機能しsuccessます。

私の質問は-成功関数の外でそれらにアクセスするにはどうすればよいですか？

4

3 に答える 3

1

Ajaxがasync呼び出され、関数の実行が終了した後、成功イベントが最初に発生します。成功関数が呼び出される前に要素にアクセスすると、その要素は使用できなくなります。これが、成功時に要素を動的に追加する「#bigmenu」が成功前に非表示にできない理由です。また、レンダリングされていない要素を非表示にすると失敗するので、domに追加してからhide関数を実行してください。on同様に、動的に追加された要素のイベントを登録するためにを使用する必要があります。

$(document).mouseenter('mouseenter','#mydiv', function(e){
    $('#bigmenu').hide();
    $('#bigmenu').fadeIn(100);
});
于 2013-01-19T17:19:24.827 に答える
0 
$(document).on('mouseenter', '#mydiv', function(e){
    $('#bigmenu').hide().fadeIn(100);
});

そのイベントを動的にロードされたHTML要素に委任する必要があります。アニメーションを再生するには、divをhide（）する必要があります。

于 2013-01-19T17:17:51.583 に答える
0

on()DOMを変更した動的にロードされた要素では、次のメソッドを使用する必要があります。

$('#bigmenu').hide();

$('#mydiv').on('mouseenter', function() {
    $('#bigmenu').fadeIn(100);
});

これを行う必要はありません。JavaScriptイベントを中心とした機能でhide()のみ使用する必要があります。on()

于 2013-01-19T17:18:02.730 に答える