Question

我通常在使用JQuery时没有问题，但有时当我编写独立的Javascript时，我感觉自己就像今天一样完全白痴。（我这样做只是因为一个我很无聊而另外两个我试图更多地了解Javascript。）

这是JQuery ......

$(document).ready(function() {
  $(".call").on('click', function() {
   if ( $(".code").val() === "" ) {
      alert("Function denied!");
    } else {
      alert("Function accepted!");
    }
  });
});

这里约有30分钟的时间没有让它工作，直到我在结束</body>标签之前把它放好。

有人可以解释为什么必须这样做而不是头标记吗？

var code = document.querySelector('.code'),
    call = document.querySelector('.call');

document.addEventListener('DOMContentLoaded', function() {
  call.addEventListener('click', function() {
    if ( code.value === "" ) {
      alert("Function denied!");
    } else {
      alert("Function accepted!");
    }
  });
});

Answer 1

您尝试在这些元素可用之前查询.code和.call的DOM。如果将代码移动到正文的末尾，则在将元素的html解释为DOM之后执行脚本，这样您就不会看到问题。

更好的方法是将querySelector移到DOMContentLoaded回调中：

document.addEventListener('DOMContentLoaded', function() {
  var code = document.querySelector('.code'),
      call = document.querySelector('.call');
  call.addEventListener('click', function() {
    if ( code.value === "" ) {
      alert("Function denied!");
    } else {
      alert("Function accepted!");
    }
  });
});

除了文体学之外，上面的代码无论其位置如何都应该有效。

Answer 2

虽然您在文档加载时设置了要运行的事件侦听器，但您依赖于在运行时初始化的两个变量code和call，即在文档完全加载之前。将代码放在body标签的底部可确保查询返回您案例中的预期结果。尝试将变量声明放在事件侦听器中。

作为旁注，您可能使用querySelector错误。为了清楚起见，querySelector将返回匹配元素的第一个实例。 querySelectorAll将返回与查询匹配的所有元素实例。我只是指出这一点，因为你在这个例子中使用的是类，而不是ID。

脚本必须在工作之前出现

2 个答案: