Wordpress和AJAX模型

Question

挑战：从DIV中加载带有显示ID的WordPress的单个帖子页面

成功：使用下面的JS，我能够将主元素及其子元素拉到显示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);
  });
});

​

但是，输出是意外的。它没有将main和它的所有子元素直接放到模型中，而是重写HTML父/子关系，如下所示：

使用jQuery从上面注入jQuery AJAX (失败/意外)：

​

<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">
		
		
	</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>

​

单个post 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-## -->

	<nav class="navigation post-navigation" role="navigation">
		<h2 class="screen-reader-text">Post navigation</h2>
		<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>
	</nav>
  </main>

​

有人能就如何解决这一问题提供指导吗？

Answer 1

如果没有代码的工作版本，帮助您是非常困难的，但是这里什么也没有。有一件事你可以(就像我想的那样)去找出这一切哪里出了问题。

步骤1:首先使用.load而不发送元素(在您的示例中是“main”)，并测试是否一切都恢复正常。改变这一点：

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

对此：

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

步骤2:现在，如果结果是您预期的结果(所有来自加载URL的HTML )，我们可以继续。

第三步:现在尝试如下：

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

我希望这也能实现您预期的效果，它将返回元素中的所有内容，并使用'main‘ID。

这就是我修复它的方法，因为我认为问题在*选择器中。

就我个人而言，我会尝试这样的方法(没有经过充分的测试)：

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