调用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"东西之前,那么你就是#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>