javascript - 调用javascript函数

Question

我有问题，当我按下按钮时，我的 javascript 函数不可用:

<script type="text/javascript" language="javascript">   
(function ($) {
    $.fn.addToList = function (opts) {
        var input = $(this);
        opts.button.click(function () {
            opts.list.append("<li>" + input.val() + "</li>");
        });
    };
}(window.jQuery));

$("#zutat").addToList({
    button: $("#btn"),
    list: $("#list")
});
</script>

和

<input type="text" id="zutat" name="zutat"></input>
<input type="button" id="btn" value="Click">
<ul id="list"></ul>

如何调用这个 javascript 函数？我的问题是什么？

Answer 1

如果您的 script 标签在 #zutat" 之前，那么当 DOM 元素是还没有准备好。在这种情况下，当 jQuery 选择器正在执行时，它不会匹配元素，因为它们还不可用。

要修复它，您应该用 $(document).ready 函数包装您的代码，或者将它放在 body 标记的底部。

<script type="text/javascript" language="javascript">   
 (function($) {

  $.fn.addToList = function(opts) {
    var input = $(this);
    opts.button.click(function() {
      opts.list.append("<li>" + input.val() + "</li>");
    });
  };



  $(document).ready(function() { // <<<<<<< execute after document ready.
    $("#zutat").addToList({
      button: $("#btn"),
      list: $("#list")
    });
  });

})(window.jQuery);

</script>