Soumen Roy
asked on
Adding a Javascript click event to an HTML element given a class dynamically
Hello,
The following piece of codeshows a function that is called from an ajax request success function. The argument to this may contain an array or null. In case of a null, a paragraph is displayed, else an unordered list <ul> is generated with the array elements as the list <li> items. The list items are accordingly put into different classes depending on the elements of the array.
Now, all the possible array elements are known to me, and I want to produce click events for all the possible classes. That made me write the following codes. But it does not seem to work.
__________________________ __________ __________ __________ __________ __________ __________ __________ _______
<script type="text/javascript">
function showserviceslist(serviceli st) {
$('#services').remove();
$('#noservices').remove();
if( servicelist == null ) {
$(".serviceslist").append( "<br><p class=\"noservices\" id=\"noservices\">No Services Registered</p>");
}
else {
$(".serviceslist").append( "<ul class=\"services\" id=\"services\"><a>Service s</a></ul> ");
var count = servicelist.length;
var i = 0;
for( i=0 ; i<count ; i++ ) {
var servicename = servicelist[i];
servicename = servicename.replace(/\s/g, '');
$(".services").append("<li class=\"btn_" + servicename + "\"><a>" + servicelist[i] + "</a></ul>");
}
}
}
$(document).ready(function () {
$(".btn_ShowVideo").clickf unction(){
alert("Hello");
});
});
</script>
__________________________ __________ __________ __________ __________ __________ __________ __________ _______
What do I have to do, to make this work correctly??
Thanks in advance.
The following piece of codeshows a function that is called from an ajax request success function. The argument to this may contain an array or null. In case of a null, a paragraph is displayed, else an unordered list <ul> is generated with the array elements as the list <li> items. The list items are accordingly put into different classes depending on the elements of the array.
Now, all the possible array elements are known to me, and I want to produce click events for all the possible classes. That made me write the following codes. But it does not seem to work.
__________________________
<script type="text/javascript">
function showserviceslist(serviceli
$('#services').remove();
$('#noservices').remove();
if( servicelist == null ) {
$(".serviceslist").append(
}
else {
$(".serviceslist").append(
var count = servicelist.length;
var i = 0;
for( i=0 ; i<count ; i++ ) {
var servicename = servicelist[i];
servicename = servicename.replace(/\s/g,
$(".services").append("<li
}
}
}
$(document).ready(function
$(".btn_ShowVideo").clickf
alert("Hello");
});
});
</script>
__________________________
What do I have to do, to make this work correctly??
Thanks in advance.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@Julian Hansen.. .on() worked like a charm.. Thanks a lot.. :)
You are welcome.
1. You can use event delegation like this
Open in new window
2. You can do this event binding after appending element to the DOM which you are doing inside success callback for that you just need to move the
Open in new window
after the for loop.
That it's.