Question

我动态创建表包含一些数据。当用户双击每个<td>时，<td>会转换为<input type='text'>。如果用户在此输入外部单击，则必须将其保存到数据库。但问题是，如果用户双击<td>，第一次触发功能，如果再次双击，则触发点击事件。

<table>
  <tbody>
    <tr><td data-name="name">US</td></tr>
  </tbody>
</table>

<script>
  $(document).on('dblclick','tbody tr td', function(){
    var value = $(this).text();
    var name = $(this).attr('data-name');
    $(this).html('<input type="text" id="tmp_ed" value="'+value+'"/>');
    $(document).on('click', function(e){
       if(e.target.id !='tmp_ed'){
          var item = $('#tmp_ed').val();
          $.ajax({
            url: "update.php",
            data: item,
            success: function(d){
               alert(d);
             }
          });
        }
    });
  });
</script>

Answer 1

是的，这应该是行为。如你所附，双击这里 -

 $(document).on('dblclick','tbody tr td', function(){

仅限tbody tr td。点击它后，它会像你说的那样转换为<input type='text'>。现在，此元素没有附加双击。因此，您无法再次双击。

如果您需要再次双击，请将JS修改为 -

        ....
        var name = $(this).attr('data-name');
        $(this).html('<input type="text" id="tmp_ed" value="'+value+'"/>');
        $(this).on('dblclick', function(){
            $(this).html(value);    
        })    
        $(document).on('click', function(e){
           if(e.target.id !='tmp_ed'){
        ....

参考小提琴 - https://jsfiddle.net/jmeengzu/

Answer 2

isSingleClick: Boolean = true;     

method1CallForClick(){
   this.isSingleClick = true;
        settimeout(()=>{
            if(this.isSingleClick){
                 doTheStuffHere();
            }
         },250)
}
method2CallForDblClick(){
         this.isSingleClick = false;
         doTheStuffDblClickHere();
}

如何在jquery中每次处理双击事件

2 个答案: