ajax完成后重置一个函数

Question

我有一个小问题，我试图用jQuery创建一个内联编辑系统。所以当用户点击一个表格字段时，innerhtml将会随着表格字段的内容而变成一个输入字段。 Onblur这个输入字段保存在一个mysql数据库中，innerhtml变回新的内容。我希望用户多次编辑相同的文本。如果我使用.live('click',function(){});每次用户单击表格字段时都会添加输入，因此我得到的输入将由输入替换为最后一个输入的值。非常讨厌，我使用.one函数解决了这个问题，但现在用户只能编辑每个表格一次！在ajax调用完成之前是否有办法禁用直播活动？

jQuery的

$(document).ready(function(){ 
var id = 0; 
$('table.editable td').one('click', function(event) {  

    var content = $(this).html(); 
    id = $(this).parent().find('.id').val(); 
    var class = $(this).attr('class'); 

    $(this).html('<input type="text" id="editablefield" name="'+class+'" value="'+content+'"/>'); 

    $(this).unbind(event); 
}); 

$('#editablefield').live('blur', function() { 
    var value = $(this).val(); 
    var name = $(this).attr('name'); 
    $.ajax({ 
     type: "POST", 
     url: "modules/Events/ajax/saveField.php", 
     data: "id="+id+"&val="+value+"&type="+name, 
     success: function(data) { 
      var data = data; 
      alert(data); 
     }, 
     error: function(request, status, error) { 
      alert(request.responseText); 
     } 
    }); 

    $(this).parent().html(value); 
}); 

}); 

前端

<?php 
$query = "SELECT * FROM mod_events"; 
$result = mysql_query($query) or die(mysql_error()); 



echo "<table class='editable'>"; 

echo "<tr>"; 
echo "<th></th>"; 
echo "<th>Event</th>"; 
echo "<th></th>"; 
echo "<th></th>"; 
echo "<th></th>"; 
echo "<th>Capacity</th>"; 
echo "</tr>"; 

while($row = mysql_fetch_assoc($result)) { 

    echo ("<tr>"); 
    echo ("<td>"); 
    echo ("<input type='hidden' value='".$row['event_id']."' class='id'>"); 
    echo ("</td>"); 
    echo ("<td colspan='4' class='event_name'>"); 
    echo ($row['event_name']); 
    echo ("</td>"); 
    echo ("<td class='event_capacity'>"); 
    echo ($row['event_capacity']); 
    echo ("</td>"); 

    echo ("</tr>"); 

} 

echo "</table>"; 
?> 

及AJAX脚本

<?php 
require_once('../../../../config.php'); 
require_once("../../../../inc/dbconnect.php"); 

$id  = mysql_real_escape_string($_POST['id']); 
$value = mysql_real_escape_string($_POST['val']); 
$field = mysql_real_escape_string($_POST['type']); 

$query = "UPDATE mod_events SET ".$field." = '".$value."' WHERE event_id = ".$id; 

echo mysql_query($query); 


?> 

希望你们能帮助我了！

Answer 1

你可以检查是否已经有此表单元格像这样的输入：

$('table.editable td').click(function(event) {  
    if ($('input',this).length == 0) { //check if there is already an input? 
     var content = $(this).html(); 
     id = $(this).parent().find('.id').val(); 
     var class = $(this).attr('class'); 

     $(this).html('<input type="text" id="editablefield" name="'+class+'" value="'+content+'"/>'); 

     // $(this).unbind(event); // this shouldn't be needed anymore. 
    } 
}); 

，以避免aularons注释中描述的问题：

，但可能会导致这种情况：用户点击进行编辑，将数据更改为555，发出请求但尚未完成，然后用户将数据更改为333，现在该请求变得更快（首先被路由到某个缓慢的地方或由于某种原因被重新发送数据包），现在用户将在该字段中看到333，而在服务器上它将是555，因为这是555请求rrived而请求正在运行，然后再结合333我所做的是解除绑定后：jsfiddle.net/eDJqL - aularon

您需要更改像下面的代码。

$('#editablefield').live('blur', function() { 
    var value = $(this).val(); 
    var name = $(this).attr('name'); 
    var cell = $(this).closest('td'); 
    cell.data('request-running', true); // set data to remember request is running 
    $.ajax({ 
     type: "POST", 
     url: "modules/Events/ajax/saveField.php", 
     data: "id="+id+"&val="+value+"&type="+name, 
     success: function(data) { 
      cell.data('request-running', false); // mark finished ajax call 
      var data = data; 
      alert(data); 
     }, 
     error: function(request, status, error) { 
      cell.data('request-running', false); // mark finished ajax call 
      alert(request.responseText); 
     } 
    }); 

    $(this).parent().html(value); 
}); 

和

$('table.editable td').click(function(event) {  
    if ($('input',this).length == 0 || !$(this).data('request-running')) { //check if there is already an input? Or the old request is still runnig. 
     var content = $(this).html(); 
     id = $(this).parent().find('.id').val(); 
     var class = $(this).attr('class'); 

     $(this).html('<input type="text" id="editablefield" name="'+class+'" value="'+content+'"/>'); 

     // $(this).unbind(event); // this shouldn't be needed anymore. 
    } 
}); 

Answer 2

执行此操作的最常见方法是禁用输入，或者设置一个标志，防止用户将注意力集中在/将其转换为编辑字段。对于后者，您可以使用jQuery data

Ajax请求的完成/成功回调将再次解除禁用或标志。

Answer 3

我没有解除绑定点击事件，然后结合之后再次AJAX请求完成后，摆脱了以下可能的情况下（也张贴如上评论）的：

用户点击编辑，更改数据 555，请求进行但尚未 完成，然后用户改变 数据333，现在这个请求会 更快（第一次拿到的地方路由 缓慢或有它是 某种原因，包重发），现在用户将看到 333场，而服务器 上它是555的辩论，因为在333后555的请求到达 。

这里的the result（你会看到丑陋的警报辩论，因为测试是jsfiddle.com，所以它会在Ajax错误路线上）。