javascript - 如何修复 $(this).val 在 jquery 的 ajax 调用中返回错误

Question

在 ajax 成功调用中，$(this).val() 返回错误；

我有一个表，我从数据库中附加一些值。我正在使用<div contenteditable = "true">. 所以，当我编辑我的表时，我想获取更改/更新的数据。

因此，在我的 ajax 成功调用中，我将数据附加到表中并使用$(selector).on("blur")方法来尝试获取更新的数据。

但是，$(this).val()返回此错误。

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined at w.fn.init.val

$(document).ready(function() {
  $("select.option").change(function(e) {
    e.preventDefault();
    var value = $(this).children("option:selected").val();

    console.log(value);

    $.ajax({
      type: 'post',
      url: '/ajax',
      data: {
        value: value
      },
      success: function(result) {
        if (result.length === 0) {

        } else {
          console.log(result);

          let data = result;

          $.each(data, (index, item) => {
            $(".tableData").append(`<tr>
                    <td><div contenteditable = "true" class="edible">${item.st_id}</div></td>
                    <td><div contenteditable = "true" class="edible">${item.co1}</div></td>
                  </tr>`);
          })
          $(".edible").blur((e) => {
            e.preventDefault();

            console.log($(this).val())
          })
        }
      },
      error: function(err) {
        console.log(err)
      }
    });
  });
});

我理解这里的问题是，当手动访问$(this)它时，它指的是窗口本身，而不是我试图访问的元素。但是我对如何访问已编辑/更新的表数据的想法为零。

标签： javascriptjqueryajax