使用 jquery 和 contenteditable="true" 更新值

Question

我有这个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>

我想在用户更改 table 单元格中的值时使用 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 未捕获类型错误：无法读取 null属性'createDocumentFragment'

如何解决？有什么问题？

Answer 1

您不能改用 arrow function, as they cannot have a this value bound to them. Use a normal 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);
                    }
                });

  });

使用 jquery 和 contenteditable="true" 更新值

Update value using jquery and contenteditable="true"

html

javascript

jquery

onchange

contenteditable