使用 jquery 和 contenteditable="true" 更新值 [重复]

Posted 2023-05-07

【中文标题】使用 jquery 和 contenteditable="true" 更新值 [重复]

【英文标题】：Update value using jquery and contenteditable="true" [duplicate]

【发布时间】：2020-10-15 06:22:30

【问题描述】：

我有这个 html：

<tr role="row" class="odd">
    <td class="sorting_1">Deluxe Junior Suite</td>
          <td contenteditable="true" class="update_rate" data-id="46">0.00</td>
        </tr>

当用户更改表格单元格中的值时，我想使用 jquery 更新价格，所以我写：

$('.update_rate').on('input', (e) => 

  var price = $(this).html();
    var id = $(this).data('id');

var data = 
                    _token: " csrf_token() ",
                    id: id,
                    price: price,
                    
    ;
    console.log(data);
    $.ajax(
                    type: "POST",
                    url: '/update_rate',
                    dataType: "json",
                    data: data,
                    success: function (data)
                    
                      if (data.status == '200') 
                            console.log('updated'); 
                                                
                    ,
                    error: function(data)
                    
                        console.log(data);
                    
                );

  );

但我得到了一个错误：

jquery.min.js:2 Uncaught TypeError: Cannot read property 'createDocumentFragment' of null

如何解决？有什么问题？

【参考方案1】：

您不能使用arrow function，因为它们不能绑定this 值。请改用普通的function expression。

$('.update_rate').on('input', function(e)

  var price = $(this).html();
    var id = $(this).data('id');

var data = 
                    _token: " csrf_token() ",
                    id: id,
                    price: price,
                    
    ;
    console.log(data);
    $.ajax(
                    type: "POST",
                    url: '/update_rate',
                    dataType: "json",
                    data: data,
                    success: function (data)
                    
                      if (data.status == '200') 
                            console.log('updated'); 
                                                
                    ,
                    error: function(data)
                    
                        console.log(data);
                    
                );

  );