刷新$(文档).ready在Javascript中
我有一个在我的页面上连续运行的脚本,它检测是否有新项目已提交到我的数据库,此时它会向我的页面添加额外的html:刷新$(文档).ready在Javascript中,javascript,jquery,javascript-events,Javascript,Jquery,Javascript Events,我有一个在我的页面上连续运行的脚本,它检测是否有新项目已提交到我的数据库,此时它会向我的页面添加额外的html: var count_cases = -1; setInterval(function(){ $.ajax({ type : "POST", url : "new_lead_alerts_process.php", dataType: 'json', cache: false, succe
var count_cases = -1;
setInterval(function(){
$.ajax({
type : "POST",
url : "new_lead_alerts_process.php",
dataType: 'json',
cache: false,
success : function(response){
$.getJSON("new_lead_alerts_process.php", function(data) {
if (count_cases != -1 && count_cases != data.count) {
//add new HTML element to page
$('#content').prepend("<div class=\"reportRow\"><div id=\"reportRowLeft\" style=\"width: 63px;\">"+dayOfMonth+"</div><div id=\"reportRowCenter\">"+timeSubmitted+"</div><div id=\"reportRowRight\" style=\"width: 126px;\"><div id=\"claimButton"+data.id+"\"><form action=\"\" method=\"post\" name=\""+data.id+"\"><input type=\"hidden\" id=\"lead_id"+data.id+"\" name=\"lead_id\" value=\""+data.id+"\" /><input type=\"hidden\" id=\"client_id"+data.id+"\" name=\"client_id\" value=\""+data.client_id+"\" /><input type=\"hidden\" id=\"user_id"+data.id+"\" name=\"user_id\" value=\"1\" /><input type=\"image\" name=\"submit\" class=\"claimButton\" onClick=\"expand('claimed"+data.id+"');collapse('claimButton"+data.id+"');\" src=\"images/claim.gif\" id=\""+data.id+"\" style=\"width: 126px; height: 29px; margin: 0; border: 0px; padding: 0; background: none;\"></form></div><img id=\"claimed"+data.id+"\" style=\"display: none;\" src=\"images/claimed.gif\" /></div><div id=\"clear\"></div></div>");
}
count_cases = data.count;
});
}
});
},1000);
我的问题是,第二次AJAX提交似乎不起作用。我认为这是因为$(document).ready命令只在页面首次加载时启动,并且由于我正在通过AJAX动态更新页面内容,因此无法提交添加到页面的任何新元素
我已经试过了。委派和。现场,而不是。准备好了,两个都不起作用
任何帮助都将不胜感激。将document.ready中的功能设置为回调,然后在每次从ajax向页面添加新元素时执行此操作,如下所示:
$(document).ready(function(){ MakeClaim(); });
function MakeClaim(){
$(".claimButton").click(function(){
var element = $(this);
var Id = element.attr("id");
var client_id = $("#client_id"+Id).val();
var user_id = $("#user_id"+Id).val();
var lead_id = $("#lead_id"+Id).val();
var dataString = 'client_id='+client_id+'&user_id='+user_id+'&lead_id='+lead_id;
$.ajax({
type: "POST",
url: "new_lead_alerts_update.php",
data: dataString,
cache: false
});
return false;});
}
success : function(response){
$.getJSON("new_lead_alerts_process.php", function(data) {
if (count_cases != -1 && count_cases != data.count) {
//that huge string
MakeClaim();
}
count_cases = data.count;
});
}
编辑
尝试更改此选项:
onClick=\"expand('claimed"+data.id+"');collapse('claimButton"+data.id+"');\"
到
请试试这个:
function TryIt(getId)
{
var element = $(getId);
var Id = element.attr("id");
var client_id = $("#client_id"+Id).val();
var user_id = $("#user_id"+Id).val();
var lead_id = $("#lead_id"+Id).val();
var dataString = 'client_id='+client_id+'&user_id='+user_id+'&lead_id='+lead_id;
$.ajax({
type: "POST",
url: "new_lead_alerts_update.php",
data: dataString,
cache: false
});
}
只需在claimButton中使用javascript onclick函数,并随时调用TryIt()函数。您应该委托事件:
$(文档)。在('click','claimButton',函数(){
为什么不在AJAX函数的成功回调中执行这些操作?谢谢你的建议。但是,我已经尝试了这三种方法,它们似乎都不是解决方案。这实际上与我的原始代码的工作方式相同。当我单击动态插入元素上的submit按钮时,它会对f页面,而不是通过AJAX提交。@Jeremy-页面会刷新,因为每当发布表单时,它都会刷新页面。您可以在表单上设置一个提交事件,该事件返回false。嗯,对于页面上未动态插入的其他表单,情况并非如此。我假设AJAX函数抑制了subm表单的错误。我尝试添加以下内容:$(“#表单”).submit(function(){return false;})
但似乎不起作用。@Jeremy-我想知道这是否是因为return false
在jQuery闭包中可能有不同的含义。我尝试将其添加到表单本身:onsubmit=“return false”
这成功地阻止了表单提交,但也阻止了AJAX进程。抱歉,这不起作用。它只是刷新页面,不发送任何数据。在尝试调用TryIt()函数时,请像TryIt一样调用(此);
onClick=\"expand('claimed"+data.id+"');collapse('claimButton"+data.id+"');return false;\"
function TryIt(getId)
{
var element = $(getId);
var Id = element.attr("id");
var client_id = $("#client_id"+Id).val();
var user_id = $("#user_id"+Id).val();
var lead_id = $("#lead_id"+Id).val();
var dataString = 'client_id='+client_id+'&user_id='+user_id+'&lead_id='+lead_id;
$.ajax({
type: "POST",
url: "new_lead_alerts_update.php",
data: dataString,
cache: false
});
}