1

我有这两行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>

基于这个额外的简单示例（在您尝试的任何地方都可以完美运行）。我的问题是我无法让 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();
          }
        });
    });
}

})();
4

1 回答 1

2

您可以$('#slider1').bxSlider();在 ajax 成功回调内部调用。使用$.each添加div后，可以直接调用$('#slider1').bxSlider();，无需添加script标签。

于 2012-05-26T12:54:33.223 回答