Question

I have the problem, that my javascript function isn´t when I press the button:

<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>

and

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

How do I call this javascript function? What is my problem?

Answer 1

If your script tag is before the #zutat" stuff, then you are trying to manipulate on #zutat when the DOM elements are not ready yet. In this case, When the jQuery selector is being executed, it will not match the elements, since they are not available yet.

To fix it, you should wrap your codes by the $(document).ready function or put it at the bottom of body tag.

<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>