Question

我正在尝试使用ajax在div中加载wordpress post但是加载内容后它内部的jQuery不起作用。例如，我在加载页面中有手风琴和滑块，它们也不起作用。并且加载的div的关闭按钮也不起作用。

我也检查过这篇文章Jquery event handler not working on dynamic content

但没有成功。

portfolio.php

<div id="fff">

</div>


<h2 class="ow-heading"><?php the_title(); ?></h2>
    <?php the_content(); ?>
<ul class="projectlist clearfix" id="<?php global $post; $post_slug=$post->post_name; echo $post_slug; ?>">
<?php
global $wp_query;
query_posts( array('post_type' => array( 'portfolio' ),'showposts' => 12, 'paged'=>$paged )
);
if (have_posts()) : while (have_posts()) : the_post();
?>
<li class="project">
    <a href="<?php the_permalink(); ?>" data-post="" rel="<?php the_ID(); ?>" class="ajax" data-toggle="modal" data-target="#myModal">
        <?php if ( has_post_thumbnail() ) { ?>
        <?php the_post_thumbnail(); ?>
        <?php } ?> 
        <div class="projectinfo">
            <div class="meta">
                <h4><?php the_title(); ?></h4>
                <h6><em><?php echo get_post_meta($post->ID, "spq_portfolio_tag", true) ?></em></h6>
            </div>
        </div>
    </a>
</li>
<?php endwhile; ?>
<?php else: ?>
<p><?php _e("Sorry, no posts matched your criteria.","arclite"); ?></p>
<?php endif; wp_reset_query(); ?>
</ul>

单portfolio.php

<?php get_header(); ?>
  <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
  <div class="sparq-main">
    <div class="insparq-main">

      <h1 class="portfolio-single-title"><?php the_title(); ?></h1>
      <?php the_content(); ?>
    </div>
  </div>
<?php endwhile; endif; ?>
<?php get_footer(); ?>

custom.js

jQuery.noConflict();
jQuery(document).ready(function(){



/*----------------------------------------------------*/
/* Sticky Navigation
/*----------------------------------------------------*/ 

jQuery(".bottommenu").sticky({ topSpacing: 0 });

/*----------------------------------------------------*/
/* Slab Text
/*----------------------------------------------------*/  

function slabTextHeadlines() {
jQuery("h1.tagline").slabText({
      "viewportBreakpoint":380
    });
};
jQuery(window).load(function() {
    setTimeout(slabTextHeadlines, 1000);
});

/*----------------------------------------------------*/
/* Parallax
/*----------------------------------------------------*/

jQuery('.sep, .header').each(function(){
   jQuery(this).parallax("100%", 0.3); 
});

/*----------------------------------------------------*/
/* Accordion
/*----------------------------------------------------*/

jQuery('.accordion').each(function(){
      var acc = jQuery(this).attr("rel") * 2;
      jQuery(this).find('.accordion-inner:nth-child(' + acc + ')').show();
       jQuery(this).find('.accordion-inner:nth-child(' + acc + ')').prev().addClass("active");
});

jQuery('.accordion .accordion-title').click(function() {
      if(jQuery(this).next().is(':hidden')) {
          jQuery(this).parent().find('.accordion-title').removeClass('active').next().slideUp(200);
          jQuery(this).toggleClass('active').next().slideDown(200);
      }
      return false;
});

/*----------------------------------------------------*/
/* Custom Scroll
/*----------------------------------------------------*/

jQuery("html").niceScroll({cursorborder:"0px solid #fff",cursorwidth:"10px",scrollspeed:"70"});

/*----------------------------------------------------*/
/* Flex Slider
/*----------------------------------------------------*/

jQuery('.testi').flexslider({
    selector: ".slides > li",
    directionNav: false 
});

/*----------------------------------------------------*/
/* Navigation Scroll to Section
/*----------------------------------------------------*/

  var device = navigator.userAgent.toLowerCase();
  var ios = device.match(/(iphone|ipod|ipad)/);
 //function that returns element's y position

    jQuery("a[href*=#]").on('click', function(e) {
      var scrollTarget = jQuery(this.hash).offset().top;
      if(scrollTarget) 
          e.preventDefault();
        if(parseInt(scrollTarget) !== parseInt(jQuery(window).scrollTop())) {
          var nav2 = jQuery("nav");
        if (ios) nav2.hide();
          jQuery('html,body').animate({scrollTop:scrollTarget}, 1000, "swing", function(evt) {
          if (ios) {
            if(scrollTarget == 0) 
                nav2.css({position:'absolute', top:jQuery("#intro").height()});
            else
                nav2.css({position:'absolute', top:scrollTarget});
            var nav2clone = jQuery("nav")
            nav2clone.show();
          }
      });
    }
    });

    if (ios) {
        jQuery(document).bind('touchmove',function(){
          var intro = jQuery("#intro"), nav2 = jQuery("nav");
          console.log(nav2.position().top);
        if(intro.height() != nav2.position().top)
        {
            nav2.css({position:'fixed', top:'0px'});
            console.log(nav2.position().top);
        }
        else
        {
            nav2.css({position:'relative', top: ''});
        }
      });   
    }

/*----------------------------------------------------*/
/* Fit Video Responsive
/*----------------------------------------------------*/

jQuery(".spq-video").fitVids();
});

Ajax Call

jQuery("a.ajax").on('click', function(e) {
    e.preventDefault();
    var url = jQuery(this).attr("href");
    jQuery.get(url, function(data) {
      jQuery("#fff").show(600).html(data);
      var scrollTarget = jQuery("#fff").offset().top;
          jQuery('html,body').animate({scrollTop:scrollTarget-80}, 1000, "swing");
    });
  });

使用ajax加载页面内容后，与custom.js关联的所有元素都无法正常工作，如滑块，手风琴等等。加载内容已停止工作。

Answer 1

你的代码就像你将它包装成jQuery“ready”一样。

我在这里模拟了你网页的JSFiddle：

http://jsfiddle.net/NEest/

jQuery(function () {
    jQuery(document.body).on('click', 'a.ajax', function () {
        var post_url = jQuery(this).attr("href");
        var post_id = jQuery(this).attr("rel");
        alert(post_url + " - " + post_id);
        jQuery("#fff").html('<div class="loading">loading...</div>');
        jQuery("#fff").load(post_url).fadeIn(500);
        return false;
    });

    jQuery("a.pclose").click(function () {
        jQuery("#fff").fadeOut();
    });
});

请注意：JSFiddles不需要“就绪”代码，因为它是一个内置功能（左侧是下拉选项），但为了演示目的而添加它并没有什么坏处。

如果你可以更新JSFiddle，那么任何剩下的问题都会让每个人都更容易提供帮助。

Answer 2

所有jquery插件在页面加载时读取文档的dom，因此为了在ajax加载的内容上启用jquery功能，你必须重新初始化jquery插件。那么你的代码就可以了。
Please check my answer on this post as well

jQuery .on（）没有在wordpress上加载Ajax加载的帖子

2 个答案:

http://jsfiddle.net/NEest/