JQuery with ajax 不断发布多个结果
JQuery with ajax keeps posting multiple results
我在页面上有很多显示机器状态的图像。如果单击图像,则会打开模态窗口,您可以选择新状态。状态通过 ajax 发送到数据库。如果我尝试更改另一台机器的状态,以前的机器状态也会改变。我接触过的每个状态每次都会作为我选择的最后一个状态重新发送。
它以某种方式创建了我更改的机器阵列,并且每次更改都会发布所有机器。刷新页面将清空阵列。
我想我需要在 php 中使用类似于 unset
的东西,或者将内部点击功能移到第一次点击函数之外。
$(function() {
$('#mach_status_dialog').hide();
$('.mach_status').click(function(){
var mach = $(this).attr('id');
$('#mach_status_dialog').dialog({
modal: true,
draggable: false,
resizable: false,
width: 500,
title: 'Mach ' + mach + ' status'
});
$('.statuses').click(function(){
var user = user;
var class = $(this).attr('class');
class = class.substring(10);
var status = $(this).first().find('p').parent().text();
var data_string = 'mach=' + mach + '&status=' + status + '&user=' + user;
$.ajax({
url: 'ajax_op_mach_status.php',
type:'POST',
data: data_string,
dataType: 'json',
cache: false,
success: function(response){
var newSrc = 'images/Circle2_'+class+'_25.png';
console.log($('#'+mach+'.mach_status').attr('src', newSrc));
$('#'+mach+'.mach_status').attr('src', newSrc);
$('#'+mach+'.mach_status').attr('title', status);
$( "#mach_status_dialog" ).dialog('close');
}
});
});
});
});
$(function() {
$('#mach_status_dialog').hide();
$('.mach_status').click(function(){
var mach = $(this).attr('id');
$('#mach_status_dialog').dialog({
modal: true,
draggable: false,
resizable: false,
width: 500,
title: 'Mach ' + mach + ' status'
});
});
$(document).on('click', '.statuses', function(){
var user = user;
var class = $(this).attr('class');
class = class.substring(10);
var status = $(this).first().find('p').parent().text();
var data_string = 'mach=' + mach + '&status=' + status + '&user=' + user;
$.ajax({
url: 'ajax_op_mach_status.php',
type:'POST',
data: data_string,
dataType: 'json',
cache: false,
success: function(response){
var newSrc = 'images/Circle2_'+class+'_25.png';
console.log($('#'+mach+'.mach_status').attr('src', newSrc));
$('#'+mach+'.mach_status').attr('src', newSrc);
$('#'+mach+'.mach_status').attr('title', status);
$( "#mach_status_dialog" ).dialog('close');
}
});
});
});
正如你所说,只需将.click
事件移动到 DOM 就绪回调中即可。就目前而言,每次单击mach_status
时,您都在分配一个新的单击事件处理程序。因此,如果我单击mach_status
10 次,然后单击一次statuses
链接,您将收到 10 个 AJAX 请求。
如果只想在用户单击mach_status
时绑定到statuses
单击,请在元素上添加一个类以告知它何时准备就绪:
$(function() {
$('#mach_status_dialog').hide();
$('.mach_status').click(function(){
$(".statuses").addClass("ready");
var mach = $(this).attr('id');
$('#mach_status_dialog').dialog({
modal: true,
draggable: false,
resizable: false,
width: 500,
title: 'Mach ' + mach + ' status'
});
});
$('.statuses.ready').click(function(){
// Do AJAX
});
});
问题就在这里...
$('.statuses').click(function(){
每次单击 *.mach_status* 元素时,它都会为所有状态添加事件侦听器。您可以将其更改为
$(this).find('.statuses').click(function abc(){
.
.
.
this.removeEventListner('click', abc);
});
请注意我如何使用命名函数并在触发后将它们从事件队列中删除。
相关文章:
- JavaScript-将for循环的多个结果推送到数组中
- 无限滚动在IE中返回多个结果
- 通过AJAX从PHP发回多个结果
- 如何使用Lodash从数组中查找多个结果
- getElementByClassName 与多个结果
- JQuery with ajax 不断发布多个结果
- 在 innerHTML 中返回多个结果
- 搜索功能返回多个结果
- 在模态角度js中返回多个结果
- 发射角度方法时出现多个结果
- 通过jquery将多个结果发送到php页面中的问题
- 如何获得1000多个结果解析
- 根据类名修改多个结果
- jQueryAJAX-返回并显示多个结果
- 在express.js路由中插入多个结果到req对象
- 根据答案创建带有多个结果的问卷
- 从Ajax post中获取多个结果
- 如何使用ajax在select2中显示多个结果数据
- 我可以使用循环与onclick写出多个结果
- 类似于promises/deferred's的模式,支持多个结果和取消