dqstti8945 2010-09-23 10:46
浏览 45
已采纳

jQuery功能不会传播到页面的所有区域

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>
</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

  • 写回答

2条回答 默认 最新

  • dongqing220586 2010-09-23 10:50
    关注

    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();
});
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥15 matlab中使用gurobi时报错
  • ¥15 WPF 大屏看板表格背景图片设置
  • ¥15 这个主板怎么能扩出一两个sata口
  • ¥15 不是，这到底错哪儿了😭
  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂