Javascript 不会通过动态加载的表单和脚本触发

Question

我正在通过 .ajax 将表单和随附的 JS 脚本加载到模式中，但 JS 没有按预期触发或初始化元素。 （没有任何反应）HTML 和脚本在其他地方按预期工作，除非通过 ajax 加载到模式中。

以下是我如何使用 Promise 加载内容，以确保仅在加载 HTML 后才加载脚本。有什么指示我可能会出错吗？

$(document).on('click', '#post-offer', function() {
        $.when(
              $('head').append('<link rel="stylesheet" href="' + baseURL + '/css/jquery-ui.css">'),
            $('head').append('<link rel="stylesheet" href="' + baseURL + '/css/jquery.tagit.css">'),
            $('head').append('<link rel="stylesheet" href="' + baseURL + '/slim/slim.min.css">'),
            $.getScript( "//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"),
            openModal(baseURL + '/ajax.cgi?a=showoffer'), // << THIS IS THE HTML FORM
            $.Deferred(function(deferred){
                $(deferred.resolve);
            })
        ).done(function(){
            $.getScript( "//maps.googleapis.com/maps/api/js?v=3&key=xxxxxxxxxxxxxx"),
            $.getScript( baseURL + "/js/tag-it.js" ),
            $.getScript( baseURL + "/slim/slim.jquery.js" ),
            $.getScript( baseURL + "/js/listing.js" );
            
        });
});

为了完整起见，这是 openModal 函数（按预期工作）：

function openModal(arg) {
    $('#loading').show();
    if (arg.match(/^http/)) { //If query, then send it.
        var $query = arg;
        $.ajax({
            url: $query,
            success: function(result) {
                $('#modalWrap').show();
                $('#modalContent').html(result);
                $('#loading').hide();
            },
            error: function(xhr) {
                $("#loading").hide();
                alert('Communication error! [Details: ' + xhr.status + ' - ' + xhr.statusText + ']');
            }
        });
    } else { //Or just return the input argument
        $('#modalWrap').show();
        $('#modalContent').html(arg);
        $('#loading').hide();
    };
};

Answer 1

尝试将其替换为您的 openModal 函数：

function openModal(arg) {
  return new Promise((resolve, reject) => {
    $("#loading").show();
    if (arg.match(/^http/)) {
      //If query, then send it.
      var $query = arg;
      $.ajax({
        url: $query,
        success: function (result) {
          $("#modalWrap").show();
          $("#modalContent").html(result);
          $("#loading").hide();
          resolve();
        },
        error: function (xhr) {
          $("#loading").hide();
          alert(
            "Communication error! [Details: " +
              xhr.status +
              " - " +
              xhr.statusText +
              "]"
          );
          reject()
        },
      });
    } else {
      //Or just return the input argument
      $("#modalWrap").show();
      $("#modalContent").html(arg);
      $("#loading").hide();
      resolve();
    }
  });
}

如果仅此方法没有帮助，请在添加上面的代码后将 done 替换为此函数：

done(function () {
  window.requestAnimationFrame(() => {
    $.getScript("//maps.googleapis.com/maps/api/js?v=3&key=xxxxxxxxxxxxxx");
    $.getScript(baseURL + "/js/tag-it.js");
    $.getScript(baseURL + "/slim/slim.jquery.js");
    $.getScript(baseURL + "/js/listing.js");
  });
});

Answer 2

以下是我为其他遇到此问题的人解决的方法。

这不是加载问题。所有脚本和 HTML 均加载良好。问题是，动态加载的脚本之一 listing.js 有一个 document.ready() 包装器，由于 DOM 已经加载，所以它没有触发，因此 JS 元素动态加载的表单没有被初始化。但是，当我删除 document.ready() 时，它仍然没有初始化动态加载的元素。

为了解决这个问题，我将 document.ready() 更改为函数 initialize() 并从动态加载的 HTML 中最后调用该函数。现在一切正常：

//DYNAMICALLY LOADED SCRIPT FIRST    
function initialize(){

    //INITIALIZE JS FORM ELEMENTS...

    }

然后，在同一个 AJAX 调用中：

<form class="dynamically-loaded-HTML">

<!-- FORM ELEMENTS -->

</form>
<script>
initialize();
</script>