Question

我在body标签的开头用内联脚本声明了一个函数。然后在外部脚本中。在表单提交。它会触发一个匿名函数处理表单中的数据并提交$ .ajax方法。外部脚本在文件末尾调用

问题是我在表单标记中指定了一个函数名称作为＆data-success =＆＃34; functionName＆＃34;＆＃39;。它确实在外部脚本中触发了该功能。但外部脚本无法识别html文件中调用的内联函数。

这是一个例子。 https://jsfiddle.net/vsbmn8w1/?utm_source=website&utm_medium=embed&utm_campaign=vsbmn8w1

HTML

<script>
  $(document).ready(function() {

    // The Inline function that dont get called externally
    function searchResult(data) {
      alert()
    }
});
</script>

<!-- Trigger On Submit -->
<form method="post" class="async-form" data-success="searchResult">
    <button type="submit">submit</button>
</form>

EXTERNAL SCRIPT

$(document).ready(function() {
  $(document).on("submit", "form.async-form", function(event) {
  // Declare form in a variable
  var $this = $(this);

  // Prevent Page reloading
  event.preventDefault();

  // Collect Form parameters
  var action = $this.prop('action');
  var method = $this.prop('method');
  var form = $this.serialize();

  // Default request object
  var request = {
    url: action,
    type: method,
    data: form
  };

  // Adding parameter to the object if data exist
  if (typeof $this.data('success') != 'undefined') {
    request['success'] = $this.data('success');
  }
  if (typeof $this.data('error') != 'undefined') {
    request['error'] = $this.data('error');
  }
  if (typeof $this.data('beforeSend') != 'undefined') {
    request['beforeSend'] = $this.data('beforeSend');
  }
  if (typeof $this.data('complete') != 'undefined') {
    request['complete'] = $this.data('complete');
  }

  // Finally make the ajax request
  $.ajax(request);
})
});

Answer 1

您的searchResult是ready回调中的本地人，ready回调无法从外部访问。

你可以通过移出它来使它全球化：

$(document).ready(function() {
    // ...anything that needs to wait goes here...
});

function searchResult(data) {
  alert()
}

...然后可以访问该回调之外的代码（例如在其他脚本中）。

但全局变形是一件坏事。 :-)您可以查看Webpack，Browserify或类似的打包/捆绑系统，这些系统允许您使用导入机制编写具有依赖关系但不使用全局变量的离散脚本文件。（如果您使用Babel之类的转发器，则甚至可以使用ES2015 + [aka＆＃34; ES6＆＃34;]中定义的新import和export机制其中一个捆绑商。）

无法从外部脚本

1 个答案: