jQuery functionality not propagating to all areas of page
I'm using the 'timepickr' jQuery function, the problem is it works ok in the main webpage, however when I invoke it through an AJAX call, the funcionality is non-existant. The input box is displayed fine, but the mouseover funcionality isn't there. Code I'm using as follows....
This is the page that contains the "div2" div: Note, the invocation of the timepickr jQuery thing works fine.
<head>
<link rel="Stylesheet" media="screen" href="reset.css" />
<link rel="Stylesheet" media="screen" href="styles.css" />
<link rel="Stylesheet" media="screen" href="ui.core.css" />
<link rel="Stylesheet" media="screen" href="ui.timepickr.css" />
<link rel="stylesheet" media="screen" href="jquery.timepickr.css" type="text/css" />
<SCRIPT LANGUAGE="JavaScript" SRC="js/timepicker.js"></SCRIPT>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/showDiv2Contents.js"></script>
<script type="text/javascript" src="js/jquery.ui.all.js"></script>
<script type="text/javascript" src="js/jquery.timepickr.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".timepickr").each(function(){
$(this).timepickr();
})
});
</script>
</head>
<body>
<div id="div1">
<input class='timepickr' type='text' value='09:00' /><br> <!-- This works fine -->
</div>
<select onchange="showDiv2Contents(this.value)">
<option value='0' selected>1</option>
<option value='1'>2</option>
</select>
<div id="div2"></div>
<开发者_Go百科/body>
When the dropdown box's state is changed, the showDiv2Contents js function is called, as follows:
function showDiv2Contents()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("div2").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","testajax2.php",true);
xmlhttp.send();
}
...and the "testajax2.php" is as follows...
<?php
echo "<br><br><br>";
echo "Contents of Div2:";
echo "<br><br><br>";
echo "<input class='timepickr' type='text' value='09:00'/>"; //This doesn't work
?>
While the contents of testajax2.php is displayed fine, the timepickr functionality is non-existant. Any ideas? Thanks so much in advance,
Mike
If you're already including jQuery I'd take advantage of it for the AJAX call as well, and use a success callback to apply the timepicker to new elements in the loaded <div> as well. To do all of that, your function would be shortened down to:
function showDiv2Contents()
{
$("#div2").load("testajax2.php", function() {
$(this).find(".timepickr").timepickr();
});
}
This uses .load() to get/load the ajax content of testajax2.php then executes the .timepckr() plugin again on .timepickr elements that were just created/loaded inside <div id="div2">.
Currently the dynamically loaded elements simply aren't there when the $(".timepickr") selector looks for results, so no code is run on them. As an aside, your document.ready code can also be trimmed down, there's no need for the .each(), like this:
$(function() {
$(".timepickr").timepickr();
});
try call at the end of function showDiv2Contents()
$('.timepickr').timepickr();
exactly what Nick say ....
加载中,请稍侯......
精彩评论