js click on li added by script

Question

I click on "My link1", i have the alert "I clicked on" -> OK
I click on button "Add line", it adds my link 2 -> OK
I click on "My link2" just added, nothing happens. -> KO

Any help is welcome.

This is my code

<ul style="list-style-type: none;padding-left: 0px;" id="listitems">
  <li ><a href="#" id="mylink">my link 1</a></li>
</ul>
<button onclick="addrecepitem();" id="btnrecepajouter">Add line</button>

<script>
function addrecepitem(){
document.getElementById('listitems').innerHTML += '<li id="mylink">my link 2</li>';
}

$('#mylink').click(function(){
alert('I clicked on ');
}

</script>

Your click handler seems to be missing a closing `)`. – Edric Sep 24 '20 at 15:07 — Edric, Sep 24 '20 at 15:07

score 1 · Answer 1 · answered Sep 24 '20 at 15:07

The event handler is set in the beginning when the element is not made yet.

Set the event handler on the window like this:

$('window').on('click', '.link', function(e) {
     alert('I clicked on', e.Target);
});

Anyhow setting the same id for different elements is bad practice. Try to use classes instead.

score 0 · Answer 2 · answered Sep 24 '20 at 15:25

you have made some basic and conceptual mistakes in your code.

id should be identical so you should not use duplicate ids.
you are using the click event on a particular id. So this event only triggers when your click in that element. I have made some updates based on your requirements. check now

var counter = 2;
function addrecepitem(){
document.getElementById('listitems').innerHTML += '<li> <a href="#">my link '+ counter++ +'</li>';
}


$( "#listitems" ).on( "click", "li", function() {
  console.log( $( this ).text() );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul style="list-style-type: none;padding-left: 0px;" id="listitems">
  <li ><a href="#">my link 1</a></li>
</ul>
<button onclick="addrecepitem();" id="btnrecepajouter">Add line</button>

js click on li added by script

2 Answers2