Dynamic element onclick event

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

I am trying to link all my list element to respond upon click event. The list elements will be created dynamically on my JS.
<Below this line, add a link to the EXACT exercise that you are stuck at.>

<In what way does your code behave incorrectly? Include ALL error messages.>
The list element does not respond correctly to the onclick function. I have created a static list element for testing, and even that is not responding.
https://jsfiddle.net/tmu50t9z/

// search.html
<form class="search" >
  <input id="searchAddress" type="text" name="q" placeholder="Search address"  />
  <ul class="results" id="addressListID">
    <li id="2"><a href="index.html">6 Cashew Crescent<br><span>6 Cashew Crescent. (S)679751</span></a></li>
	</ul>	 
</form>

//myjs.js
$( "#addressListID" ).on( "click", "li", function( event ) {
    event.preventDefault();
    console.log( $( this ).text() );
});



I don’t actually see the problem. You might forgot to link the JQuery. I tested it and it works properly.

I found out that it was actually my .CSS type that is hindering the way.

https://jsfiddle.net/w8p7v3ay/

I have commented out the part that is causing the error. You can have a look at the commented out portion.

1 Like