0

私がやろうとしていることをできるだけ明確に説明し、人々が問題を理解できるようになることを願っています。

$(document).ready(function() {
  $('body').on('click', '.mainNav', function() {
    var href = $(this).attr('href');
    $('body').load(href);
   });
});

これは私に問題を引き起こしているコードのビットです。基本的には、divから'href'属性を取得し、それをロードしてbodyタグの現在のコンテンツを置き換えることを想定しています。

これは初めて機能しますが、.load（）を介して新しいコンテンツが生成されると、divは応答を停止します。私はJSにかなり慣れていないので、答えが明白なものである場合は事前に謝罪します。私は自分で解決策を見つけようとしてきましたが、見つけたものはすべて、動的に生成されたコンテンツに対して.on（）が機能するはずだと教えてくれます。

編集：フィドルで問題をエミュレートできないので、問題を明確にすることを期待して、インデックスページ全体を含むペーストビンを投稿しています。

http://pastebin.com/xT5syd9j

編集：それはadeneoのソリューションを使用して動作します。最初から全部を投稿しなかったことに対する彼らの意見と謝罪のために皆に多くの義務がありました。みんなの時間を節約できたと思います。

4

3 に答える 3

2

ここでの問題は、を呼び出すときに実際にロードするものである可能性$('body').load(href)があります。ページ全体（<html>および<body>タグを含む）のHTMLをロードすると、問題が発生する可能性があります。ブラウザは、誤ったHTML（この場合はのようなもの<html><body><html><body>...</body></html></body></html>）から何かを使用できるようにすることで、このような問題に対処します。これにより、予期しない結果が生じる可能性があります。

より良いアイデアは次のとおりです。

  1. HTMLを適切に整理します（以下を参照）
  2. を使用してロードする場合は、上記で生成されたHTMLの一部のみをロードします$(...).load()。

Ad.1。タグのすぐ下<body>に、独自のIDがあり、<body>タグに配置されるすべての要素が含まれている要素があることを確認してください。次のようになります。

<html>
...
<body>
    <div id="main_div">
    <!-- all elements here -->
    </div>
</body>
</html>

Ad.2。渡されたURLにセレクターを追加できるため、このようなコンテンツの読み込みははるかに簡単です.load()（jQueryドキュメントページの「ページフラグメントの読み込み」を参照）。.load()

$('body').load(href + ' #main_div');

この方法では、ページ全体を取得しますが、ID ""の要素のみを取得し、コンテンツ#main_div全体をその要素に置き換えます。<body>

このようにして、bodyにアタッチされたイベント（これらの委任されたものでさえ）は引き続き正しく機能するはずです。

于 2012-08-05T00:12:17.090 に答える
0

何が問題なのかはよくわかりませんが、ハンドラーがアタッチされているのと同じ要素にロードすることと関係があると思いますので、試してみてください：

$(document).ready(function() {
    $(document).on('click', '.mainNav', function(e) {
        e.preventDefault();
        console.log('I just clicked : '+e.target.href);
        $('body').load(e.target.href);
    });
});

また、もちろん、これによりページ上のすべてのコンテンツが置き換えられることを認識しています。ロードされたコンテンツに同じクラスの新しい要素がない限り、何も起こりません。コンテンツをロードするためにもコンテナを使用することをお勧めします。そしてもちろん、リンクはサーバー上の実際のファイルへのリンクである必要があります。

<head>また、ロードするファイルに別のタグなどのセットが含まれていないことを確認して<body>ください。これにより、HTMLコンテンツのみが混乱します。

編集：

が要素のタイプである場合.mainNavは<a href="link_you_are_trying_to_load"></a>、デフォルトのアクションも防止する必要があります。更新されたコードを参照してください。

新しい編集：

あなたが抱えている問題はかなり明白です、あなたは次のような要素を使用しています：

<div class="mainNav" href="test.php" id="active">

<a>div要素には属性hrefがないため、要素以外の有効な属性ではないため、JSはその値を取得しません。

<a>要素を要素に変更するか、href属性を次のように変更できます。

<div class="mainNav" data-href="test.php" id="active">

そして、やります：

var href = $(this).data('href');

少なくともそれは有効なHTMLです！

また、あなたは「コンテナ」のような要素を持っているようです#siteので、そうしませんか？

$('#site').load(href); //using the data-href as above
于 2012-08-04T23:33:44.333 に答える
0

これを試して：

$(document).ready(function(){
    $('body').on('click', '.mainNav', function() {
        var href = $(this).attr('href');
        $('body').load(href + " body > *");
    });
});

ここで行うのは、ページ（href）のbody要素のコンテンツのみをロードすることです。そのページに要素を追加する必要はありません。Tradeckが述べたようにボディの内容を選択するだけです。

問題は、のページhrefが完全なHTMLページである場合、DOCTYPE、2番目のhtmlタグ、 2番目headのタグbodyなどをロードしていることです。

于 2012-08-05T00:15:32.063 に答える