重新加载后,onclick 事件失败
onclick event fails after reloading
我要完成的:
我有一个div 可以跟踪用户的统计数据。单击用户时,div 的内容将替换为 ajax 请求回显页面的用户详细信息。每隔 10 秒,div 将使用 ajax 刷新,因此旧内容,所有用户的统计信息将再次显示。
我的问题:加载页面后,当单击用户时,onclick 事件效果很好;将加载详细信息。大约 10 秒后,div 内容将由旧的 ALL 用户统计信息刷新。
到目前为止一切顺利,除了 onclick 事件不适用于新内容......
这是我的代码:
Javascript:
var x;
var namen;
window.onload = function(){
x = true;
$("submitnieuw").observe('click', addturf);
$("submitdelete").observe('click', verwijderturf);
setInterval(function (){
if(x === true){
alert("a");
x = $('stats').getElementsByTagName('tr');
jQuery("#stats").load("stats.php");
jQuery("#recent").load("vandaag.php");
namen = $('stats').getElementsByTagName('tr');
for(var i = 1; i < namen.length; i++){
namen[i].observe('click', select);
}
}
}, 10000);
namen = $('stats').getElementsByTagName('tr');
for(var i = 1; i < namen.length; i++){
namen[i].observe('click', select);
}
};
function select(naam){
//highlight the selected list element
var name = naam.findElement('tr').id;
jQuery.ajax('details.php',{
data: {
'Naam': name,
'door': $("door2").value
},
type: 'post',
success: function(data){
$("stats").innerHTML = data;
},
error: ajaxFailure
});
}
function detail(ajax){
var text = ajax.responseText;
alert(text);
L = text;
}
function verwijderturf() {
var naam = $("naam").value;
$("naamnieuw").value = "";
$("naam").value = "";
$("redennieuw").value = "";
jQuery.ajax('server.php',{
data: {
'mode': 'verwijderturf',
'naam': naam,
'door': $("door2").value
},
type: 'post',
success: update,
error: ajaxFailure
});
}
function addturf() {
var naam = $("naamnieuw").value;
var reden = $("redennieuw").value;
$("naamnieuw").value = "";
$("naam").value = "";
$("redennieuw").value = "";
jQuery.ajax('server.php',{
data: {
'mode': 'addturf',
'naam': naam,
'door': $("door2").value,
'reden': reden
},
type: 'post',
success: update,
error: ajaxFailure
});
}
function update(ajax){
jQuery("#stats").load("stats.php");
jQuery("#recent").load("vandaag.php");
}
function ajaxFailure(ajax, exception) {
alert("Error making Ajax request:" +
"'n'nServer status:'n" + ajax.status + " " + ajax.statusText +
"'n'nServer response text:'n" + ajax.responseText);
if (exception) {
throw exception;
}
}
统计信息.php(再次加载的内容):
<?php
include_once("db.php");
?>
<?php
$names = mysql_query("SELECT Naam From users");
$feedData = '';
$feedData .= "<fieldset>";
$feedData .= "<legend>Turfjesteller</legend>";
$feedData .= "<table border=0>";
$feedData .= "<tr>";
$feedData .= "<td>Naam</td>";
$feedData .= "<td>Aantal</td>";
$feedData .= "<td>Gedaan</td>";
$feedData .= "<td>Resterend</td>";
$feedData .= "</tr>";
while($r = mysql_fetch_array($names)){
$feedData .= "<tr id=".$r['Naam'].">";
$feedData .="<td>" . $r['Naam'] . "</td>";
$sql="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Adtje'";
$result=mysql_query($sql);
$count=mysql_num_rows($result); //count = adtjes
$sql2="SELECT * FROM turfjes WHERE Naam='".$r['Naam']."' AND Type='Turfje'";
$result2=mysql_query($sql2);
$count2=mysql_num_rows($result2); //count2 = turfje
$feedData .="<td>" . $count2 . "</td>";
$feedData .="<td>" . $count . "</td>";
$feedData .="<td>" . ($count2-$count) ."</td>";
$feedData .="</tr>";
}
$feedData .="</table>";
$feedData .="</fieldset>";
echo($feedData);
?>
如前所述,页面看起来完全相同,但 onclick 事件不再起作用。
div 内容完全相同,所以我不知道出了什么问题。
namen = $('stats').getElementsByTagName('tr');
for(var i = 1; i < namen.length; i++){
namen[i].observe('click', select);
}
应该获取所有表格行并再次向它们添加 onclick 事件......
将统计信息div 替换为统计信息后.php 10 秒后,onclick 事件不再工作。
谁能帮我?
您可以使用 jQuery 的 on() 方法设置初始点击处理程序:
$(document).on('click', '<div selector>', select);
这将确保在新元素上仍捕获点击事件。
尝试在
每次 ajax 响应后将 onclick 重新绑定到所需的div
相关文章:
- 如何在执行此特定onclick事件时执行JavaScript函数
- 如何调用“;链接_;在onclick事件上使用Javascript
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 选择onclick事件jquery
- 执行php函数的onclick事件的其他替代方案
- 动态创建OnClick事件Javascript
- onClick事件未触发reactjs
- 使用java脚本更改onClick事件中菜单选项卡的颜色
- 如何使用OnClick事件通过参数调用来调用PHP函数
- 使用jQuery动态添加onClick事件
- onclick事件不'不要在萤火虫或铬中点火
- 如何向onClick事件处理程序传递一个接受参数的函数,并且仍然将该函数绑定到组件's”;这个“;上下文
- xPages标签onclick事件不'不要在空白处工作
- 用beautifulsoup-python调用onclick事件
- 使用JavaScript将onclick事件与参数绑定
- 使用onClick事件扩展Aviarc容器小部件
- 在按钮的onclick事件上将字符串传递给JavaScriptFuntion
- 用于显示onclick事件计数的可调整跨度标记
- Javascript onclick事件在第一次单击时未启动
- 如何使用onclick事件触发此代码.我尝试过,但失败了