I am sending an ajax request to load some information constructed in a div from PHP. There is an onClick function there. Ajax responds well, but the JavaScript function does not work in the HTML client.
This is the response from ajax written in PHP:
$iscId = $row['instructorSemesterCourseId'];
$year = $row['year'];
$startDate = $row['startDate'];
$endDate = $row['endDate'];
$courseCredit = $row['courseCredit'];
$pinned = $row['pinned'];
$semesterName = $row['semesterName'];
$date1 = date('F j, Y', strtotime($startDate));
$date2 = date('F j, Y', strtotime($endDate));
$div .= "<div id='SCid".$iscId."' class='schoolClass'>
<div class='schoolClassLeft'>
<div class='schoolCourseTitle' onClick='classSessionEnter('SCid".$iscId."'); style='width:100%'>".$semesterName." ".$year." | ".$date1." – ".$date2."</div>
</div>
</div>";
echo('$div');
The function written in JavaScript and jQuery is:
function classSessionEnter(elm) {
alert('elm');
$('#' + elm).css({"background": "#E7F9CE"});
$('#' + elm).css({"position": "absolute"});
$('#' + elm).css({"top": "0px"});
$('#' + elm).css({"color": "#006600"});
}
The alert does not work - it does not get into the function at all. Why?