1

私はこの2行の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 に答える