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元素尚未就绪时，您正试图在#zutat上进行操作。在这种情况下，当执行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>

Answer 2

我认为你应该这样移动括号

})(window.jQuery);

在Firefox中（我使用Firebug进行测试）如果你这样做

function(){ alert("GONG"); }();

如果你用括号

包装函数，它会给你一个错误

(function(){ alert("GONG"); })();

将执行匿名函数。

你还应该在$(document).ready();调用中将调用包装到dom元素中，如qiao的回答所示。

Answer 3

如果您想在点击按钮时将<li>添加到<ul>，那么您将以非常全面的方式进行讨论。你不需要扩展jquery或对象原型来做到这一点。

尝试以下

$("#button").click(function() {
  var val = $("zutat").val();
  $("#list").append($("<li>" + val + "</li>"));
});

Answer 4

通常，click事件的处理方式如下

$('#btn').on("click",function(){
        // code
});

我不知道你的代码到底做了什么，但不知道你想要的是什么。

调用javascript函数

4 个答案: