Attach event handler and each function

Question

When I click on the li I got a new li created. However clicking I want the same event on the new list items so I used:

$('ul').on( 'click', $this, function(){

But now the content is duplicated!

<ul>
  <li>1</li>
  <li>2</li>
</ul>

JS:

(function(){
    $('li').each(function(){
        var $this = $(this);
        $('ul').on( 'click', $this, function(){
            $('ul').append('<li>new</li>');
        });
    });
})(jQuery)

http://jsfiddle.net/24cnwmqv/1/

I just want when you click on the existing or new list items you got 1 new created list item. Thank you.

not sure if this is clear enough, I personally can't tell what you're asking? the title and description doesn't match firstly and then the description itself loses me :s — treyBake, Nov 12 '18 at 16:38

score 0 · Answer 1 · answered Nov 12 '18 at 16:40

0

Simply use:

$('ul').on( 'click', 'li', function(){
  $('ul').append('<li>new</li>');
});

Here's the updated fiddle.

answered Nov 12 '18 at 16:40

Bhojendra Rauniyar

83,432
35
168
231

I need each to get the index of the li – mamaia84x Nov 12 '18 at 17:03

Rory McCrossan · Accepted Answer · 2018-11-12T17:10:36.457

0

The problem is because you're duplicating click event handlers in the each loop - remove that. Then use li as the selector instead of the $li reference:

(function() {
  $('ul').on('click', 'li', function() {
    $('ul').append('<li>new</li>');
    
    var index = $(this).index();
    console.log(index);
  });
})(jQuery)

li {
  background: #ccc;
  width: 50px;
  padding: 5px 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
</ul>

You may also want to consider changing the logic to only append to the parent ul instead of all in the current DOM:

$(this).closest('ul').append('<li>new</li>');

edited Nov 12 '18 at 17:10

answered Nov 12 '18 at 16:41

Rory McCrossan

331,213
40
305
339

I need each to get the index of the li – mamaia84x Nov 12 '18 at 17:03
You can still do that using the method I showed above using `index()`. I edited the answer to show you – Rory McCrossan Nov 12 '18 at 17:10

Attach event handler and each function

2 Answers2