Question

我有两行HTML代码......

<div id="slider1" data-param1="XXX" data-param2="XXX"></div>
<script src="script.js" type="text/javascript"></script>

通过使用jQuery，JSON和PHP的script.js文件生成小部件。好吧，正如您将在代码中看到的，我的目标是在body

中生成类似的内容

<div id="slider1">
  <div>...</div>
  <div>...</div>
  <div>...</div>
</div>

基于此extra simple example（在您尝试的任何地方都能正常运行）。我的问题是我无法让bxSlider得到工作，也许我错过了AJAX的东西。这里有script.js代码。

(function() {
// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/

if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.7.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() {   
    jQuery(document).ready(function($) { 

        /******* Capture Data Attributes *******/
        var param1 = $('div').data('param1');
        var param2 = $('div').data('param2');

          /******* Load BxSlider *******/
        var slider   = document.createElement("script");
        slider.type  = "text/javascript";
        slider.src   = "http://bxslider.com/sites/default/files/jquery.bxSlider.min.js";
        document.head.appendChild(slider);

        /******* Load BxSlider action (IS THIS RIGHT???) *******/
        var slide   = document.createElement("script");
        slide.text  = "$(document).ready(function(){ $('#slider1').bxSlider(); });";
        document.head.appendChild(slide);

        /******* Load CSS *******/
        var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "css/style.css" 
        });
        css_link.appendTo('head');  

        $.ajax({
          type: "GET",
          url: "something.php?api_key=" + param1 + "&shop_id="  + param2,
          async: true,
          dataType: "json",
          success: function(data){
            $("#slider1").empty();
            // This works fine, data is correct
            $.each(data,function(index, value) {
              $("#slider1").append("<div>" + data[index].title + "</div>");
            });
          }
        });
    });
}

})();

当我执行小部件时，数据内容正确显示，但bxSlider似乎不起作用。你知道什么可能是错的吗？我如何以及在哪里拨打$('#slider1').bxSlider();来正确获取滑块？

如果您需要更多解释或详细信息，请告诉我。

编辑：我也尝试了这个，但是无法正常工作

 (function() {
// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/

if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.7.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js");
    if (script_tag.readyState) {
      script_tag.onreadystatechange = function () { // For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
              scriptLoadHandler();
          }
      };
    } else {
      script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main(); 
}

/******** Our main function ********/
function main() {   
    jQuery(document).ready(function($) { 

        /******* Capture Data Attributes *******/
        var param1 = $('div').data('param1');
        var param2 = $('div').data('param2');

          /******* Load BxSlider *******/
        var slider   = document.createElement("script");
        slider.type  = "text/javascript";
        slider.src   = "http://bxslider.com/sites/default/files/jquery.bxSlider.min.js";
        document.head.appendChild(slider);

        /******* Load CSS *******/
        var css_link = $("<link>", { 
            rel: "stylesheet", 
            type: "text/css", 
            href: "css/style.css" 
        });
        css_link.appendTo('head');  

        $.ajax({
          type: "GET",
          url: "something.php?api_key=" + param1 + "&shop_id="  + param2,
          async: true,
          dataType: "json",
          success: function(data){
            $("#slider1").empty();
            // This works fine, data is correct
            $.each(data,function(index, value) {
              $("#slider1").append("<div>" + data[index].title + "</div>");
            });
                $('#slider1').bxSlider();
          }
        });
    });
}

})();

Answer 1

您可以在ajax成功回调中调用$('#slider1').bxSlider();。使用$ .each添加div后，您可以直接调用$('#slider1').bxSlider();而无需添加脚本标记。

将bxSlider添加到使用AJAX生成的div

1 个答案: