Reputation: 79
i'm hoping somebody would assist me in this.
I would like to add event like keydown or any other event to elements insert into the dom using snippet below. i'm loading the html from the server.
$(document).delegate("#services", "pagebeforecreate", function(inEvent) {
$.ajax({
url:appUrl+"/tvserver/index.php/smartbox/services",
dataType:"html",
timeout:5000,
success:function(data){
$('#serviceContent').html(data);
}
});
});
this is the output from ajax into the page and i would like add event to the
li element
<div class="services-body">
<ul id="services">
<li data-name="Lanudary" data-description="laudary services for customers" data-url="http://localhost/tvserver/uploads/default.png" data-id="1" data-payable="Y" data-cost="2.00">
<div>
<img src="http://localhost/tvserver/uploads/default">
</div>
<div class="services-names">
<span class="service-name">Lanudary</span>
</div>
</li>
<li data-name="Gym" data-description="a place to train " data-url="http://localhost/tvserver/uploads/default.png" data-id="2" data-payable="N" data-cost="0.00">
<div>
<img src="http://localhost/tvserver/uploads/default">
</div>
<div class="services-names">
<span class="service-name">Gym</span>
</div>
</li>
<li data-name="Spa" data-description="Massaging of the body" data-url="http://localhost/tvserver/uploads/default" data-id="3" data-payable="Y" data-cost="5.00">
<div>
<img src="http://localhost/tvserver/uploads/default.png">
</div>
<div class="services-names">
<span class="service-name">Spa</span>
</div>
</li>
</ul>
</div>
thanks
Upvotes: 1
Views: 33
Reputation: 705
This is a way to work this
function eventClick(obj){
$(obj).on("click",function(){
// some function
});
}
$.ajax({
url:appUrl+"/tvserver/index.php/smartbox/services",
dataType:"html",
timeout:5000,
success:function(data){
var d=$(data);
d.find("#services li").each(function(){
eventClick(this);//add event lisener
});
$('#serviceContent').html(d);
}
});
Upvotes: 1