Adding functions to elements that appear in AJAX
Hey there all,
I have a table that i load into the document via ajax. the table shows a list of times. every row has a button that when clicked should call another AJAX function . However when clicking the link nothing happens. If I put a link in the original document myself and ask it to do this, it works fine, but becuse this is generated code, this option will not do.
I hope that this makes sense
THis calls for the table.... works fine...
$(function () {
$("#departmentToSchedule").change(function () {
$.ajax({
url: "schedjewelAjax.php",
data: 'deptId=' + $(this).val() +'&dayId=' + $('#dayOfWeek').val() + '&action=getShift',
type: "GET",
beforeSend: function(){
$("#listShifts").html('Loading....');
},
success: function(data){
$("#listShifts").html(data);
}
});
});
});
THis is the HTML code that gets generated:
<table id='schedjewelShift'><thead><tr>
<th>Schedjewel</th><th>Name</th><th>Start Time</th><th>End time</th><th>Day</th></tr></thead><tbody><tr id='10'>
<td>
<a href='#' id='test' class='shiftid' >Click</a></td>
<td>Dinning Closer -Weekday</td>
<td>17:00:00</td>
<td>24:00:00</td>
<td>monday </td>
</tr></tbody></table>
so what I want is when a user clicks the link id='test', something to happen, but nothing does... this is the code i am using to call this:
$(function() {
$(".shiftId").click(function() {
alert("Does this work yet");
});
});
Does anyone have an idea of why this would behave this way?
thanks in advance,
Marc