jquery - 来自 PHP 的 Jquery 替换 DIV 内容

Question

在页面中，我在摘录末尾有带有“阅读更多”的摘录帖子，所以我尝试通过点击“阅读更多”来替换包含摘录的 div 内容为完整长度的帖子。当点击“阅读更多”时，点击事件不会发生任何事情。这是我的function.php中的代码和平

 if ($show_more_tag) {
        $excerpt = $excerpt.' <a class="more-link" href="'.$perma_link.'">'.$more_tag.'</a>';
        /* JQuery Start*/
                   echo '<script type="text/javascript">
                     $(".more-link").click(function(event) {
                    $(this).parent("div").load($(this).attr("href")); //load the data
                    event.preventDefault(); // prevent the browser from following the link
                      });
                    </script>';
        /* JQuery End */
    }

错在哪里？请帮助这是我第一次尝试为网络制作东西。

感谢大家！这是对我有用的代码：

<script type="text/javascript">
    $(document).ready(function() 
    {
        $('.more-link').click(function(event) 
        {
            event.preventDefault();
            $(this).parents('div:eq(0)').load($(this).attr('href') + ' #container', function()
            {
                $('#container .PicturePlaceHolder a').each(function(index, el) 
                    {
                    $(el).addClass('fancybox');
                    });
                    $('#container .fancybox').fancybox(
                    {
                    'transitionIn' : 'elastic', 
                    'transitionOut' : 'elastic',
                    'centerOnScroll': 'true',
                    'cyclic' : 'true'
                    });
            });
        });
    });
</script>

Answer 1

您在实际内容之前输出脚本。因此 $('.more-link') 选择器不匹配任何东西。将 JS 代码包装在 document.ready 回调中：

 /* JQuery Start*/
 echo '<script type="text/javascript">
 $(function(){
   $(".more-link").click(function(event) {
     $(this).parent("div").load($(this).attr("href")); //load the data
     event.preventDefault(); // prevent the browser from following the link
   });
});
</script>';
/* JQuery End */