Question

我正在使用'timepickr'jQuery函数，问题是它在主网页中运行正常，但是当我通过AJAX调用调用它时，功能性是不存在的。输入框显示正常，但鼠标悬停功能不存在。我正在使用的代码如下....

这是包含“div2”div的页面：注意，调用timepickr jQuery的工作正常。

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

当下拉框的状态发生变化时，将调用showDiv2Contents js函数，如下所示：

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();
}

...而且“testajax2.php”如下......

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

虽然testajax2.php的内容显示正常，但是timepickr功能不存在。有任何想法吗？非常感谢，

麦克

Answer 1

如果您已经包含了jQuery，我也会利用它来进行AJAX调用，并使用success回调将时间戳应用于加载的<div>中的新元素。要完成所有这些，您的功能将缩短为：

function showDiv2Contents()
{
  $("#div2").load("testajax2.php", function() {
    $(this).find(".timepickr").timepickr();
  });
}

这使用.load()来获取/加载testajax2.php的ajax内容，然后再次在.timepckr()元素上执行.timepickr插件，这些元素刚刚在{{1}内创建/加载}}

当<div id="div2">选择器查找结果时，当前动态加载的元素不存在，因此不会对它们运行代码。另外，您的$(".timepickr")代码也可以缩减，不需要.each()，如下所示：

document.ready

Answer 2

在函数showDiv2Contents（）

的末尾尝试调用

$('.timepickr').timepickr();

尼克说的确切......

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

2 个答案: