调用javascript函数

Question

我有问题，我的javascript函数isn't当我按下按钮：

<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

通常情况下，点击事件这样

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

我不知道你的代码做究竟是什么，但不是你想要的处理。

Answer 3

如果您想在单击按钮时将<li> s添加到<ul>，您将围绕某种方式进行讨论。你不需要扩展jQuery或对象原型来做到这一点。

尝试以下

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

Answer 4

我想你应该这样

})(window.jQuery); 

在Firefox（我用萤火虫来测试这一点），如果你这样做

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

移动括号

它给你一个错误，但如果你用圆括号包装功能

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

将执行匿名函数。

你也应该在qiao的回答中显示的012调用$(document).ready();调用中的dom元素。