javascript - 带有按钮的 JQuery 列表函数

Question

我有以下 JQuery 函数:

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

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

使用这个 html 输入字段:

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

我想要做的是，在输入文件中键入一个值，按下按钮，该值将添加到一个 ul 列表中。不幸的是，上面的代码不起作用。在 jsfiddle 中它起作用了。

有人看到我的代码有错误吗？

编辑:有人知道一个完整的具有相同功能的 JQuery 示例吗？

Answer 1

您没有将 jQuery 作为您的 $ 参数传递。

尝试以下操作:

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