如何修复$（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)时，它指的是窗口本身，而不是我尝试访问的元素。但是我不知道如何访问已编辑/更新的表数据。