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

原文 标签 javascript html jquery onchange contenteditable

这个问题在这里已经有了答案:





Using jQuery $(this) with ES6 Arrow Functions (lexical this binding)

(5 个回答)


1年前关闭。




我有这个 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 未捕获的类型错误:无法读取 null 的属性“createDocumentFragment”
如何解决?问题是什么?

最佳答案

您不能使用 arrow function ,因为他们不能有 this与他们绑定(bind)的值(value)。使用普通 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);
                    }
                });

  });

关于javascript - 使用 jquery 和 contenteditable ="true"更新值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62564420/

相关文章:

jquery - jQuery导航滑动下划线修改

javascript - Jquery Mobile 的表格不响应?

javascript - React Native 在哪里存储生成的 javascript 包?

javascript - 实时搜索 Accordion 及其内容

html - 两个内容区域可通过浏览器的垂直和水平滚动条滚动

javascript - jQuery .wrap() 不环绕克隆元素

jquery - Mustache.js - 如何连接数据?

javascript - 带有 localStorage 的 jQuery 图片上传器。部分工作。默认图片不显示

javascript - Selenium Python 获取 <script> 标签信息?

javascript - JavaScript中return语句之后的Execute语句