jquery - 从代码调用时脚本不起作用，但在控制台中输入时脚本正常

Question

我正在使用 flexslider显示照片库的小部件。它使用简单的标记，因为当文档加载时，标记会适应视口(viewport)，并在文档准备好时使用脚本设置样式。加载页面时一切正常。但是我需要添加一个“选择器”，我的意思是，当有人单击链接时，应该在 flexslider 小部件中加载一个新的图库。因此，使用 jquery 我选择相应的画廊 div 并使用 $.("#galleryID").empty().append(new-markup); 编写新内容；

所以，DOM结构改变了，但是flexslider没有显示，因为它需要通过运行适配视口(viewport)的js代码来“完成”并为其设置样式。然后，我尝试“重新运行”修改div后所需的脚本，但div仍然是空白。如果我从控制台窗口运行相同的脚本，div 会正确显示。

现在我正在使用 $.getScript() jquery 方法，强制再次加载适配和样式脚本，但有时有效，有时无效。在 Firefox 中工作正常:每次单击选择器时，加载图库并运行脚本，但 Chrome 不会，有时它会，有时 div 保持白色(具有正确的标记但不需要修改)。

    <script type='text/javascript'>
    $('a.pgal').click(function () {
    var id = $(this).attr('hashtag');
    /*get the gallery elements (imgs, titles, etc)*/
    $.get("listgal.php", {hashtag:id}, function(objetogal){
    var x=0;
    /*create the flexslider markup*/
    var codigo='<div id="slider" class="flexslider"><ul class="slides">';
    var codigocarousel='<div id="carousel" class="flexslider"><ul class="slides">';
    var elementos=objetogal.length;
    for(x=0;x<elementos;x++)
    {
      codigo=codigo+ '<li><img src="fotos/'+ objetogal[x].img +'" /><p class="flex-caption">'+objetogal[x].pie+'</p></li>'
      codigocarousel=codigocarousel+'<li><img src="fotos/'+ objetogal[x].img +'" />';
    }
    codigo=codigo+'</ul></div>';
    codigocarousel=codigo+codigocarousel+'</ul></div>';

    /*Change the gallery div with this new markup*/
    $("#galeriaID").empty().append(codigocarousel);
    }, "json");
    $.getScript("js/renueva.js", function(){
    });
    return false;
    });
    </script>

renueva.js 这是使用标记作为源来设计和适应画廊视口(viewport)所需的代码。它是我尝试在 div 刷新后包含在同一脚本中的代码，但它没有做任何事情。但是在控制台中运行效果很好。我现在正在尝试使用 $.getScript 但有时会处理它的标记，有时不会使用 Chrome。使用 Firefox 完美无瑕

$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 90,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function(slider){
}
});

HTML 标记

        <div class="col-xs-12 w12 col-md-9" id="galeriabr">
          <div id="slider" class="flexslider">
            <ul class="slides">
              <li>
                <img src="fotos/armas.jpg" />
                <p class="flex-caption">Se presentan 98 delitos al día en Michoacán</p>
              </li>
              <li>
                <img src="fotos/sep.jpg" />
                <p class="flex-caption">Se tomarán medidas para garantizar evaluación a maestros: SEP</p>
              </li>
              <li>
                <img src="fotos/eleccion.jpg" />
                <p class="flex-caption">Scioli gana elección de Argentina pero puede haber segunda vuelta</p>
              </li>
            </ul>
          </div>
          <div id="carousel" class="flexslider">
            <ul class="slides">
              <li>
                <img src="fotos/armas.jpg" />
              </li>
              <li>
                <img src="fotos/sep.jpg" />
              </li>
              <li>
                <img src="fotos/eleccion.jpg" />
              </li>
            </ul>
          </div>              
        </div>

Answer 1

在形成标记的循环中有一个错误， 标签不存在。它现在工作得更好，但有时它会再次显示空白 div。我将 $.getScript() 行更改为:

    $.when(
    $.getScript( "js/renueva.js" ),
    $.Deferred(function( deferred ){
    $( deferred.resolve );
     })
    ).done(function(){
      recarga();
     });

“recarga()”它是“renueva.js”中的一个函数我将继续寻找另一个答案，因为它还不完美。我需要在每次点击它的选择器时显示图库，而不是每 10 次点击中的 9 次。