这里是最终代码

Question

我正在尝试使用以下内容将内容加载到div中：

 $(document).ready(function(){


    $(".produkty").click(function(){
        var post_id = $(this).attr("href");    
        $("#single_product_box").load(post_id + " #main" );
        return false;
     });
});

我使用的其他脚本在这里：

  <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/js/jcarousellite_1.0.1.min.js" type="text/javascript"></script>
   <script>


   $(function() {
       $(".anyClass").jCarouselLite({
         btnNext: ".next-any",
         btnPrev: ".prev-any"
       });
   });
   $(function() {
       $(".anyClass-2").jCarouselLite({
         btnNext: ".next-any2",
         btnPrev: ".prev-any2"

       });
   });

一切都很好，但在第一次加载后它停止工作。我试过用这样的东西：

 $.ajax({
    url: '$post_id',
    cache: false,
    beforeSend: function (data) {
        $('#single_product_box').html("Loading...");
    },
    success: function (data) {
        if (data!='error'){
            $('#single_product_box').html(data);
        }else{
            $('#single_product_box').html("<span style='color:red;'>Error!</span>");
        }
    },
    error: function (data) {
        $('#single_product_box').html("<span class='error'>Error!</span>");
    }
});

但是我无法再次使用它，我甚至试图将脚本放入加载的内容中，但它也会消失。我没有更多的想法。

Answer 1

第一步是获得与.load相同的结果，但使用AJAX。首先，您的url应该是您的变量，而不是具有PHP变量的字符串。然后在完成后，您需要找到目标：

$.ajax({
    url: post_id, //Your URL should be your variable
    cache: false,
    beforeSend: function (data) {
        $('#single_product_box').html("Loading...");
    },
    success: function (data) {
        if (data!='error'){
            //Have to target you element.
            $('#single_product_box').html($(data).find('#main')); //Here i'm not sure if you should add .html();
        }else{
            $('#single_product_box').html("<span style='color:red;'>Error!</span>");
        }
    },
    error: function (data) {
        $('#single_product_box').html("<span class='error'>Error!</span>");
    }
});

现在你有了内容，你对转盘有同样的问题。只需重新启动旋转木马！

要做到这一点，您必须将dataType更改为text，因为您的页面正在重新加载jQuery。当您重新加载它时，它会删除原型方法jCarouselLite并且无法访问它。

在附加HTML之后，您可以使用在DOM准备好的同一行代码！

这里是最终代码

$.ajax({
    url: post_id, //Your URL should be your variable
    cache: false,
    dataType: 'text', //Passing text here will prevent the script from runnig. Script were overriding jCarousel and couldnt active it again
    beforeSend: function (data) {
        $('#single_product_box').html("Loading...");
    },
    success: function (data) {
        if (data!='error'){
            //Have to target you element.
            var html = $(data).find('#main');
            $('#single_product_box').html(html);

            //Retrigger the carousel!
            $(".anyClass-2").jCarouselLite({
                btnNext: ".next-any2",
                btnPrev: ".prev-any2"

            });
        }else{
            $('#single_product_box').html("<span style='color:red;'>Error!</span>");
        }
    },
    error: function (data) {
        $('#single_product_box').html("<span class='error'>Error!</span>");
    }
});

Answer 2

正如我在评论中所说，看起来jQuery被多次加载（这是另一个问题 - 你需要考虑清理你的标记）。之前注册的所有插件都会丢失（因为它们使用加载的$.fn，当加载后来的jQuery时会被覆盖...）

我看到以下HTML

Line 32
<script type='text/javascript' src='http://usb-solutions.pl/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>    

Line 40
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

Line 323
<script type="text/javascript"> 
    $.getScript("http://usb-solutions.pl/wp-content/themes/usb-solutions/js/jcarousellite_1.0.1.min.js");
    $.getScript("//code.jquery.com/jquery-1.11.0.min.js");
</script>

在ajax加载后重新运行脚本

2 个答案:

这里是最终代码