Question

当我在HTML元素上运行onClick="functionName()"属性的任何函数时，它表示未定义functionName。

但是它被定义了！

function functionName() {
    //functional stuff
}

我也尝试过：

$(document).ready(function() {
    function functionName() {
        //functional stuff
    }
})

但是没有效果

在html文件中，按钮在这里

html body div table tbody tr td button

并且脚本标记在这里

html head script

有人请向我解释为什么会这样。

Answer 1

OnReady应该失败，因为解析器在解析了onClick属性时创建了一个事件处理程序。在这种情况下，click事件指向不存在的（null）函数引用。

由这个小提琴代表http://jsfiddle.net/muglio/gzeksLr5/1/（失败）

第二个小提琴代表head标签中的内联javascript。在这种情况下，浏览器已经解析并在到达onClick属性之前将functionName添加到DOM。

作品http://jsfiddle.net/muglio/LoL9Ldzr/1/

如果您接着使用相同的脚本并将其放在外部文件中＆＃34; functionName.js＆＃34;并且调用将它加载到头部的相同位置，您将创建一个竞争条件的潜力。

可以在解析onclick属性之前或之后加载脚本。不保证。

一般情况下，您应该避免使用内联javascript，原因与内联css相同。您应该在javascript中设置onclick处理程序，以避免将控制器和视图耦合在一起。

<script>
    //Using jquery here because it is clearly being used in the initial ask :)
    $(document).ready(function(){
      function functionName() {

      }

      $('#myButton').on('click',functionName);
   });
</script>

html body div table tbody tr td <button id="myButton"></button>

希望这可以帮助你。

引用错误：未定义functionName

1 个答案: