Hinzufügen bxSlider ein div mit AJAX generiert

Habe ich diese zwei Zeilen html-code...

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

erstellen Sie ein widget durch die script.js Datei mit jQuery, JSON und PHP. Gut, wie Sie im code sehen mein Ziel ist es, etwas erzeugen, wie dies in body

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

basierend auf dieser extra einfaches Beispiel (das funktioniert perfekt überall, Sie versuchen es). Mein problem ist, dass ich nicht bekommen können, bxSlider, um Arbeit zu bekommen und vielleicht bin ich etwas fehlt mit AJAX. Hier haben Sie die script.js code.

(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>");
            });
          }
        });
    });
}

})();

Wenn ich führen Sie die widget-die Inhalte der Daten wird korrekt angezeigt, aber bxSlider scheint nicht zu funktionieren.
Wissen Sie, was falsch sein kann? Wie und wo kann ich anrufen $('#slider1').bxSlider(); um einen Schieberegler, richtig?

Wenn Sie weitere Erklärungen oder details, nur sagen Sie es mir.

Edit: ich habe auch dies versucht, aber funktioniert nicht, entweder

 (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();
          }
        });
    });
}

})();
InformationsquelleAutor Fernando Á. | 2012-05-26
Schreibe einen Kommentar