如何在jquery中点击外部时保存输入

Question

我有一个记录表。当用户双击每个<td>时，它将转换为<input type="text">并在点击它之后，它必须被保存。 但问题是当点击特定的<td>时，它会这样做。

//double click ->then convert to input 
 
$(document).on('dblclick', 'tbody tr td', function() { 
 
    var tmp = $(this).text(); 
 
    var name = $(this).attr("data-name"); 
 
    $(this).html('<input type="text" id="tmp_ed" value="' + tmp + '"/>'); 
 
    $(document).on('click', function() { 
 
    if ($(this).attr('id') !== "tmp_ed") { 
 
     var item = $('#tmp_ed').val(); 
 
     var tr = $('#tmp_ed').parent().parent(); 
 
     var id = tr.find('i').attr('id'); 
 
     var update = { 
 
     id: id, 
 
     request: "update", 
 
     val: item, 
 
     column: name 
 
     }; 
 
     $.ajax({ 
 
     url: "update.php", 
 
     method: "POST", 
 
     data: update, 
 
     success: function(e) { 
 
      alert(e); 
 
     } 
 
     }); 
 
     $(this).parent().html(item); 
 
     $(this).remove(); 
 
    } 
 

 

 
    }); 
 
});

Answer 1

这里是你的需求的小型工作演示，而不AJAX调用来更新input值你的数据库：

//double click ->then convert to input 
 
var currentEle = ''; 
 
$(document).on('dblclick', 'tbody tr td', function(e) { 
 
    e.stopPropagation(); 
 
    currentEle = $(this); 
 
    var tmp = $(this).text(); 
 
    var name = $(this).attr("data-name"); 
 
    $(this).html('<input type="text" id="tmp_ed" value="' + tmp + '"/>'); 
 
    $("#tmp_ed").focus(); 
 
}); 
 

 
$(document).click(function(e) { 
 
    if ($(e.target).closest('td').length == 0) 
 
    $(currentEle).html($("#tmp_ed").val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td>test</td> 
 
    </tr> 
 
</table>

Answer 2

如何像

window.onclick = function(event) { 
    if (event.target != $('#tmp_ed')){ 
     //Your saving stuff 
    } 
} 

的jsfiddle：https://jsfiddle.net/gss6ezko/