HTML CODE:

<ul id="sortable1" class="connectedSortable ui-sortable">
<li class="ui-state-default" id="1">Name1</li>
<li class="ui-state-default" id="2">Name2</li>
<li class="ui-state-default" id="3">Name3</li>
<li class="ui-state-default" id="4">Name4</li>
<li class="ui-state-default" id="5">Name5</li>

JQUERY CODE:

$(function() {
   $("#sortable1 li").each(function()
   {
        $(this).on("click",make($(this)));
   });

   function make($li)
   {
        alert("hello");
   }
});

fiddle :

/

when i run the fiddle , it will automatically displays the alert for five list items. actually i have binded click event for list item so whenever the list is clicked it needs to call the function.

but why the above "make" function triggered five times before am clicking the list. after clicking the list item nothing happened. what is the problem ?

when i write the function code in-line everything works as expected.

Working code:

 $("#sortable1 li").each(function()
 {
    $(this).on("click",function()
    {
      alert("hello");
    });
 });

what is the correct behavior ?

HTML CODE:

<ul id="sortable1" class="connectedSortable ui-sortable">
<li class="ui-state-default" id="1">Name1</li>
<li class="ui-state-default" id="2">Name2</li>
<li class="ui-state-default" id="3">Name3</li>
<li class="ui-state-default" id="4">Name4</li>
<li class="ui-state-default" id="5">Name5</li>

JQUERY CODE:

$(function() {
   $("#sortable1 li").each(function()
   {
        $(this).on("click",make($(this)));
   });

   function make($li)
   {
        alert("hello");
   }
});

fiddle :

http://jsfiddle/gztRq/433/

when i run the fiddle , it will automatically displays the alert for five list items. actually i have binded click event for list item so whenever the list is clicked it needs to call the function.

but why the above "make" function triggered five times before am clicking the list. after clicking the list item nothing happened. what is the problem ?

when i write the function code in-line everything works as expected.

Working code:

 $("#sortable1 li").each(function()
 {
    $(this).on("click",function()
    {
      alert("hello");
    });
 });

what is the correct behavior ?

• javascript
• jquery
• html

5 Answers 5

Remove the $.each() loop pletely and just use:

$('#sortable1').on('click', 'li', function() {
    alert("Hello"); // Or make($(this)); if you still want that extra function
});

JSFiddle demo.

You call your function, don't add "(", ")". Just write name function (is reference). And this, is already define for the event function. http://jsfiddle/gztRq/437/

$(function() {    
   $("#sortable1 li").each(function() {
       $(this).click(make);
   });
   function make() {
        alert("hello "+$(this).text()); 
   }
});

You should use:

 $(this).on("click",function(){make($(this))});

Demo

Try this,

$("#sortable1 li").click(function(){
     make($(this));
});

you can try:

$(document).on("click","sortable1 li",function(){

});