【问题标题】:How to properly un-nest a jquery javascript function?如何正确取消嵌套 jquery javascript 函数?
【发布时间】:2015-09-22 17:06:28
【问题描述】:

我需要取消嵌套以下代码,因为严格的 javascript 在 Safari 和 Firefox 中抛出错误(由于某种原因它在 Chrome 中有效),说函数只能在顶层或立即在另一个函数中声明,并且 $不是函数。所以我想我需要拆分函数声明。该代码应该循环遍历表单中需要的所有元素,并在未使用所有必填字段时阻止提交。

其他注意事项:我正在使用 Google Apps 脚本进行开发,这需要严格的 javascript。另请注意,“#submitbutton”实际上是一个常规按钮,它调用处理提交的 google.script。

原代码:

<script type="text/javascript">

$('#submitbutton').on('click', function() {
   $(this).val("Submitting...");
   //check for required fields
   var emptyFields = $('[required]').filter(function() {
       $(this).removeClass("warning");
       if ($(this).val().length === 0){
         $(this).addClass("warning")
         return true
       } else {
         return false
       }
   });

   if (emptyFields.length === 0) {
       $(this).prop('disabled', true);
       document.getElementById('incompleteWarning').style.display = 'none';
       document.getElementById('bePatient').style.display = 'inline';
       google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
    } else{
      $(this).val("Submit Application")
      document.getElementById('incompleteWarning').style.display = 'inline';
      document.getElementById('incompleteWarning').style.color = 'red';
    }
});
</script>

我尝试将其分解为下面的代码,但现在它甚至无法在 Chrome 中运行。我做错什么了吗?

<script type="text/javscript">

$('#submitbutton').on('click', validatefunction('#submitbutton'));

function validatefunction(this) {
   $(this).val("Submitting...");
   //check for required fields
   var emptyFields = $('[required]').filter(filterfunction(index));

   if (emptyFields.length === 0) {
       $(this).prop('disabled', true);
       document.getElementById('incompleteWarning').style.display = 'none';
       document.getElementById('bePatient').style.display = 'inline';
       google.script.run.withSuccessHandler(fileUploaded).uploadFiles(this.parentNode);
    } else{
      $(this).val("Submit Application");
      document.getElementById('incompleteWarning').style.display = 'inline';
      document.getElementById('incompleteWarning').style.color = 'red';
    }
};

function filterfunction(this){
       $(this).removeClass("warning");
       if ($(this).val().length === 0){
         $(this).addClass("warning");
         return true;
       } else {
         return false;
       }
};

</script>

【问题讨论】:

  • this 引用未正确绑定,并且您将this 作为参数传递,我建议首先将其更改为具体的变量名。您可以尝试 var self = $(this); 并将其传递给该函数,或使用 bind(this)

标签: javascript jquery html strict


【解决方案1】:

jQuery 将使用先前预期的上下文调用您的函数。这意味着您只需要做:

$('[required]').filter(filterfunction);

$('#submitbutton').on('click', validatefunction);

【讨论】:

  • 太棒了。这修复了我在 Chrome 中的代码 [请注意,我还删除了函数声明中的参数]。不幸的是,它并没有解决我原来在 Safari 和 Firefox 中遇到的两个错误...
  • 您可以尝试将document.getElementById('someID') 替换为$('#someID')。我会考虑用 jQuery 等价物替换你的一些其他 vanilla javascript,因为 jQuery 将为你处理大多数浏览器兼容性。
  • 确保您包含带有正确脚本标签的 jQuery。如果您在 IE8 中尝试,请确保您没有使用 jQuery v2。你遇到了什么错误?
  • 在其他脚本之前的 HTML 顶部:&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
  • Firefox 中的错误:Uncaught in strict mode code, functions may be declared only at top level or immediately within another functionUncaught TypeError: $ is undefined。 Safari 中也会出现类似的错误。它在 Chrome 中运行良好。
猜你喜欢
  • 2018-11-22
  • 2021-02-07
  • 2019-10-14
  • 2014-07-03
  • 1970-01-01
  • 2016-08-08
  • 2017-05-18
  • 2011-07-18
  • 2021-01-16
相关资源
最近更新 更多