のWordpressとAJAXモーダル

Question

チャレンジ：に次のように私は主な要素を引くことができていますJSとその子を使用して ：明らかにする

成功のIDを持つDIV内部のWordPressからロードシングルポストページdivを明らかにする。

$(function() {          // DOM has loaded 
 
    var $modal = $('#reveal'); 
 
    function loadContent(url){     // Load new content into page 
 
    $modal.load(url + ' #main *').foundation('open'); 
 
    } 
 

 
    $('[data-reveal-ajax]').on('click', function(e) {  // Click handler 
 
    e.preventDefault();       // Stop link loading new page 
 
    var href = this.href;      // Get href attribute of link 
 
    var $this = $(this);      // Store link in jQuery object 
 
    loadContent(href);       // Call function: loads content 
 

 
    console.log('On Click works'); 
 
    console.log(href); 
 
    console.log($this); 
 
    }); 
 
});

ただし、出力は予想外です。代わりに、モーダルに直接メイン置き、そのすべての子供たちのために、それはそうと同じように、HTMLの親/子関係を書き換え：

上からjQueryのAJAXを使用して注入HTML（/予期しない壊れた）：

<main id="main" class="page-body" role="main" style="display: flex;"><article id="post-1241" class="post-1241 post type-post status-publish format-standard hentry category-uncategorized tag-sticky-2 tag-template"> 
 
    
 
    <!-- .entry-header --> 
 

 
    <!-- .entry-content --> 
 

 
    
 
    <!-- .entry-footer --> 
 
</article><header id="entryTitle" class="entry-header"> 
 
     <!-- .entry-meta --> 
 
     </header><h1 class="entry-title">Template: Sticky</h1><div class="entry-meta"> 
 
      </div><span class="posted-on">Posted on </span><a href="http://wordpress/template-sticky/" rel="bookmark"></a><time class="entry-date published updated" datetime="2012-01-07T07:07:21+00:00">January 7, 2012</time><span class="byline"> by </span><span class="author vcard"></span><a class="url fn n" href="http://wordpress/author/glenn-philp/">Glenn Philp</a><div class="entry-content"> 
 
    
 

 

 
<!-- @end Related Post --> </div><p>This is a sticky post.</p><p>There are a few things to verify:</p><ul> 
 

 

 

 

 
</ul><li>The sticky post should be distinctly&nbsp;recognizable&nbsp;in some way in comparison to normal posts. You can style the class if you are using the function to generate your post classes, which is a best practice.</li><code>.sticky</code><a title="WordPress Codex post_class() Function" href="http://codex.wordpress.org/Function_Reference/post_class" target="_blank">post_class()</a><li>They should show at the very top of the blog index page, even though they could be several posts back chronologically.</li><li>They should still show up again in their chronologically correct postion in time, but without the sticky indicator.</li><li>If you have a plugin or widget that lists popular posts or comments, make sure that this sticky post is not always at the top of those lists unless it really is popular.</li><section id="related-posts" class="related-posts"></section><a href="#" class="get-related-posts button">Get related posts</a><footer class="entry-footer"> 
 
     </footer><span class="cat-links">Posted in </span><a href="http://wordpress/category/uncategorized/" rel="category tag">Uncategorized</a><span class="tags-links">Tagged , </span><a href="http://wordpress/tag/sticky-2/" rel="tag">sticky</a><a href="http://wordpress/tag/template/" rel="tag">template</a><nav class="navigation post-navigation" role="navigation"> 
 
\t \t 
 
\t \t 
 
\t </nav><h2 class="screen-reader-text">Post navigation</h2><div class="nav-links"></div><div class="nav-previous"></div><a href="http://wordpress/template-password-protected/" rel="prev"></a><span class="meta-nav" aria-hidden="true">Previous</span><span class="show-for-sr">Previous post:</span><span class="post-title">Template: Password Protected (the password is “enter”)</span><div class="nav-next"></div><a href="http://wordpress/template-paginated/" rel="next"></a><span class="meta-nav" aria-hidden="true">Next</span><span class="show-for-sr">Next post:</span><span class="post-title">Template: Paginated</span></main>

シングルポストHTML（予想）：

<main id="main" class="page-body" role="main"> 
 

 
    
 
<article id="post-1241" class="post-1241 post type-post status-publish format-standard hentry category-uncategorized tag-sticky-2 tag-template"> 
 
    
 
    <header id="entryTitle" class="entry-header"> 
 
    <h1 class="entry-title">Template: Sticky</h1> <div class="entry-meta"> 
 
     <span class="posted-on">Posted on <a href="http://wordpress/template-sticky/" rel="bookmark"><time class="entry-date published updated" datetime="2012-01-07T07:07:21+00:00">January 7, 2012</time></a></span><span class="byline"> by <span class="author vcard"><a class="url fn n" href="http://wordpress/author/glenn-philp/">Glenn Philp</a></span></span> </div><!-- .entry-meta --> 
 
     </header><!-- .entry-header --> 
 

 
    <div class="entry-content"> 
 
    <p>This is a sticky post.</p> 
 
<p>There are a few things to verify:</p> 
 
<ul> 
 
<li>The sticky post should be distinctly&nbsp;recognizable&nbsp;in some way in comparison to normal posts. You can style the <code>.sticky</code> class if you are using the <a title="WordPress Codex post_class() Function" href="http://codex.wordpress.org/Function_Reference/post_class" target="_blank">post_class()</a> function to generate your post classes, which is a best practice.</li> 
 
<li>They should show at the very top of the blog index page, even though they could be several posts back chronologically.</li> 
 
<li>They should still show up again in their chronologically correct postion in time, but without the sticky indicator.</li> 
 
<li>If you have a plugin or widget that lists popular posts or comments, make sure that this sticky post is not always at the top of those lists unless it really is popular.</li> 
 
</ul> 
 
<section id="related-posts" class="related-posts"><a href="#" class="get-related-posts button">Get related posts</a></section><!-- @end Related Post --> </div><!-- .entry-content --> 
 

 
    
 
    <footer class="entry-footer"> 
 
    <span class="cat-links">Posted in <a href="http://wordpress/category/uncategorized/" rel="category tag">Uncategorized</a></span><span class="tags-links">Tagged <a href="http://wordpress/tag/sticky-2/" rel="tag">sticky</a>, <a href="http://wordpress/tag/template/" rel="tag">template</a></span> </footer><!-- .entry-footer --> 
 
</article><!-- #post-## --> 
 

 
\t <nav class="navigation post-navigation" role="navigation"> 
 
\t \t <h2 class="screen-reader-text">Post navigation</h2> 
 
\t \t <div class="nav-links"><div class="nav-previous"><a href="http://wordpress/template-password-protected/" rel="prev"><span class="meta-nav" aria-hidden="true">Previous</span><span class="show-for-sr">Previous post:</span><span class="post-title">Template: Password Protected (the password is “enter”)</span></a></div><div class="nav-next"><a href="http://wordpress/template-paginated/" rel="next"><span class="meta-nav" aria-hidden="true">Next</span><span class="show-for-sr">Next post:</span><span class="post-title">Template: Paginated</span></a></div></div> 
 
\t </nav> 
 
    </main>

誰でもこの問題を解決する方法を教えてください。

Answer 1

実際のバージョンのコードがなければ、あなたを助けることは本当に難しいですが、ここでは何もしません。これがどこが間違っているのかを知ろうとすると、あなたはできることがあります。

ステップ1：最初に要素を送信せずに（例： 'main'）、すべてが正しく戻ったかどうかをテストします。これを変更します。これに

$modal.load(url + ' #main *').foundation('open'); 

を：

$modal.load(url).foundation('open'); 

ステップ2：結果は（すべてのHTMLロードされたURLから）あなたはそれがあることを期待したものであれば今、私たちは進むことができます。

ステップ3：今、このようにそれを試してみてください。

$modal.load(url + ' #main').foundation('open'); 

私は、これはあなたにも期待何をするつもりです、それはメインの "IDを持つ要素内のすべてのものを返すことを期待しています。

問題は*セレクタにあると思うので、これを修正する方法です。

$.ajax({ 
    url: 'https://www.google.nl/', 
    success: function(data) { 
    $('#myDiv').html($(data).filter('#lipsum').html()); 
    } 
}); 

：

---

個人的に私はこのような何か（完全にテストされていない）をしようとするだろう