Dynamic element onclick event


#1



I am trying to link all my list element to respond upon click event. The list elements will be created dynamically on my JS.


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() );
});


#2

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


#3

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.