Calling javascript function

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?

Can you provide a jsfiddle jsfiddle.net/mKtn2/3

xdazz
– xdazz

2012-01-20 08:36:31 +00:00
Commented Jan 20, 2012 at 8:36 — xdazz
– xdazz, Commented Jan 20, 2012 at 8:36

qiao · Accepted Answer · 2012-01-20 08:48:41Z

5

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>

edited Jan 20, 2012 at 8:48

answered Jan 20, 2012 at 8:23

qiao

18.3k7 gold badges60 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Minkiele · Accepted Answer · 2012-01-20 08:41:20Z

3

I think you should move the parenthesis this way

})(window.jQuery);

In Firefox (I am using Firebug to test this) if you do this

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

It gives you an error but if you wrap the function with parenthesis

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

The anonymous function will be executed.

You should also wrap the call to the dom elements in a $(document).ready(); call as showed in qiao's answer.

answered Jan 20, 2012 at 8:41

Minkiele

1,2802 gold badges21 silver badges34 bronze badges

Comments

Jason · Accepted Answer · 2012-01-20 08:27:08Z

0

if you want to add <li>s to a <ul> when you click a button, you are going about it in a very round about way. you don't need to extend jquery or object prototype to do that.

try the following

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

answered Jan 20, 2012 at 8:27

Jason

15.9k3 gold badges51 silver badges73 bronze badges

Comments

mas-designs · Accepted Answer · 2012-01-20 08:24:45Z

-1

Normally the click event is handled like this

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

I don't know what your code does exactly but not that what you want.

answered Jan 20, 2012 at 8:24

mas-designs

7,5311 gold badge33 silver badges56 bronze badges

4 Comments

Esailija Over a year ago

.click, .bind, .delegate, .live etc already use .on. There is nothing wrong about using them (except .live of course).

mas-designs Over a year ago

your comment has nothing to do with my answer ? Be sure to read before you downvote

Esailija Over a year ago

Your answer implies that the OP should use .on, no?

mas-designs Over a year ago

nope not really it recommends. and I don't get the your comment because I didn't imply him not to use click,bind,delegate,live...

Collectives™ on Stack Overflow

Calling javascript function

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related