Correct way of binding click event to list item in jquery

Question

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.net/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 ?

James Donnelly · Accepted Answer · 2014-02-26 10:48:12Z

3

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

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

JSFiddle demo.

answered Feb 26, 2014 at 10:48

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

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

4 Comments

SivaRajini Over a year ago

Thanks. i knew that why it was not working in each function. anything wrong in code ?

James Donnelly Over a year ago

@SivaRajini I'm not sure what you mean.

SivaRajini Over a year ago

your answer u mentioned remove $.each loop completely. what is the reason ? why we can't bind the click event is each function ?

James Donnelly Over a year ago

@SivaRajini because there's no need for it. $('#sortable1').on('click', 'li', ...) adds a click event to all the li items contained within #sortable1.

user2226755 · Accepted Answer · 2014-02-26 10:51:51Z

3

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

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

answered Feb 26, 2014 at 10:51

user2226755

13.3k6 gold badges55 silver badges77 bronze badges

Comments

Milind Anantwar · Accepted Answer · 2014-02-26 10:49:00Z

1

You should use:

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

Demo

answered Feb 26, 2014 at 10:49

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

Comments

Krish R · Accepted Answer · 2014-02-26 10:48:49Z

0

Try this,

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

answered Feb 26, 2014 at 10:48

Krish R

22.7k7 gold badges54 silver badges60 bronze badges

1 Comment

SivaRajini Over a year ago

why that one not working in each function ? what is the correct behavior ?

Andrei · Accepted Answer · 2014-02-26 11:08:39Z

0

you can try:

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

});

edited Feb 26, 2014 at 11:08

Andrei

44.9k39 gold badges163 silver badges228 bronze badges

answered Feb 26, 2014 at 10:50

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Collectives™ on Stack Overflow

Correct way of binding click event to list item in jquery

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related