jquery - 无法将内容附加到 Sidr

Question

我正在使用Sidr ，一个提供侧边菜单的 jQuery 插件。

我正在尝试执行以下操作:

1. 通过 $.post() 从数据库获取数据并返回 json。 作品

2. 将此数据发布到我的 Sidr 菜单中。 不起作用!!!

执行脚本时会发生什么:Sidr 菜单打开，但var SHOPcontent 内容在其中找不到。 p>

我什至尝试在打开 Sidr 菜单的同时运行 alert(SHOPcontent)。警报成功:它显示 var SHOPcontent 的内容。那么为什么Sidr菜单无法显示呢？

查看下面的代码，var SHOPcontent 包含我试图通过 Sidr 源选项 回调放入 Sidr 菜单中的一堆 html。

     product_tags.click(function() {

        $.sidr('toggle', 'shop_bar');               

        $.post("display_products_2.php", {'product_title_selected': product_title_selected}, function(display_shop) {

        var shop_array = $.parseJSON(display_shop);


        for ( c = 0; c <shop_array.length; c++)

                  {
                    var one_color =  "<div style='background-color:" + shop_array[c][3] + "'" + "class='one_color'></div>" 

                    var product_colors = product_colors + one_color;

                   }; 


        var one_color = "";

        var SHOPcontent =

                "<div id='shop_bar'>" +

                "<div style='background-color:" + shop_array[0][3] + "'" + "id='shop_translucent_banner'></div>" +

                "<div id='shop_title'>" +

                "<span id='shop_brand'>" +

                 shop_array[0][2] +

                "</span>" +

                shop_array[0][4] +

                "</div>" +

                "<div id='shop_price'>" +

                shop_array[0][6] +

                "</div>" +

                "<div id='shop_picture'>" + 

                "<img src='" + "product_pictures/" + shop_array[0][9] + "'>" +

                "</div>" +

                "<div id='shop_description'>" +

                shop_array[0][5] +

                "</div>" +

                "<div id='more_product_information'>MORE INFORMATION</div>" +

                "<div id='shop_colors'>" +

                product_colors +

                "</div>" +

                "<div id='buy'>Buy</div>"  +

                "</div>"  ;

         });


   $('#shop_bar').sidr( {

                displace: false,
                name: 'shop_bar',
                source: function() {

                $('.sidr').html(SHOPcontent)

                } 

          });

寻求帮助指出我的代码有什么问题。

Answer 1

由于 sidr 函数是从 post success 函数外部调用的，因此 sidr 被不发起。尝试以下操作。确保它位于 $(document).ready() 函数中。

product_tags.click(function() {

  $.sidr('toggle', 'shop_bar');

  $.post("display_products_2.php", {
      'product_title_selected': product_title_selected
  }, function(display_shop) {
        var shop_array = $.parseJSON(display_shop);
        for (c = 0; c < shop_array.length; c++){
            var one_color = "<div style='background-color:" + shop_array[c][3] + "'" + "class='one_color'></div>"
            var product_colors = product_colors + one_color;
        };
        var one_color = "";
        var SHOPcontent = 
            "<div id='shop_bar'>" +
                "<div style='background-color:" + shop_array[0][3] + "'" + "id='shop_translucent_banner'></div>" +
                "<div id='shop_title'>" +
                    "<span id='shop_brand'>" +
                        shop_array[0][2] +
                    "</span>" +
                    shop_array[0][4] +
                "</div>" +
                "<div id='shop_price'>" +
                    shop_array[0][6] +
                "</div>" +
                "<div id='shop_picture'>" +
                    "<img src='" + "product_pictures/" + shop_array[0][9] + "'>" +
                "</div>" +
                "<div id='shop_description'>" +
                    shop_array[0][5] +
                "</div>" +
                "<div id='more_product_information'>MORE INFORMATION</div>" +
                "<div id='shop_colors'>" +
                    product_colors +
                "</div>" +
                "<div id='buy'>Buy</div>" +
            "</div>";

        $('#shop_bar').sidr({
          displace: false,
          name: 'shop_bar',
          source: function() {
            $('.sidr').html(SHOPcontent)
          }
        });
    });
});