I have a page with a link in it , when pressing the link I want to add new LI to UL using jQuery, I created my jQuery function and it works just one time, I mean, jQuery function works for just on click
jquery
$("#addRelation").ready(function (){
$("#addRelation a").css("padding","6px");
$("#addRelation .araNew").bind('click',function(){
$("#addRelation .araNew").hide();
$("#addRelation ul li:last").append('<li> \n\
<p>\n\
<label>Source</label>\n\
<select name="source[]" id="source">\n\
<option>select source</option>\n\
</select>\n\
</p>\n\
<p>\n\
<label>Destination</label>\n\
<select name="destination[]" id="destination">\n\
<option>select destination</option>\n\
</select>\n\
</p>\n\
<p>\n\
<a href="#" class="araNew">new</a> \n\
<a href="#" class="araDel">delete</a> \n\
</p>\n\
</li>');
});
html
<div class="container" id="addRelation">
<ul class="containerUL">
<li class="containerLI">
<label>Name</label>
<input type="text" name="relationName" class="longInput1"/>
<div id="arSuggestions"></div>
</li>
<li>
<label>Related Concepts</label>
<p>
<label>Source</label>
<select name="source[]" id="source">
<option>select source</option>
</select>
</p>
<p>
<label>Destination</label>
<select name="destination[]" id="destination">
<option>select destination</option>
</select>
</p>
<p>
<a href="#" class="araNew">new</a>
<a href="" class="araDel">delete</a>
</p>
</li>
</ul>
</div>
and also any suggestions for adding li to ul different from my function?
Add your append code inside $.on syntax like this
Check the working fiddle here