从代码调用脚本时脚本不起作用，但在控制台中键入时它可以正常工作答案

【问题标题】：Script doesn't work when is called from code, but it works ok when it's typed in console从代码调用脚本时脚本不起作用，但在控制台中键入时它可以正常工作
【发布时间】：2015-12-15 01:37:56
【问题描述】：

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

所以，DOM 结构发生了变化，但是 flexslider 没有显示，因为它需要通过运行适应视口和样式的 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 这是使用标记作为源来设计和适应画廊视口所需的代码。它是我尝试在 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>

【问题讨论】：

标签： jquery css html

【解决方案1】：

在形成标记的循环中出现错误，标记不存在。它现在效果更好，但有时它会再次显示空白 div。我将 $.getScript() 行更改为：

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

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

【讨论】：