Как объединить идентификатор элемента с идентификатором данных в функции JQuery?

Question

У меня есть функция нажатия ENTER, но она не работает, когда я объединяю идентификатор элемента с его идентификатором строки или идентификатором данных.Вот код:

HTML

<td class="single-line" id="celledit1{{$d->id}}" contenteditable="true" data-id="{{$d->id}}">{{ $d->male }}</td>
                            <td class="single-line" id="celledit2{{$d->id}}" contenteditable="true" data-id="{{$d->id}}">{{ $d->female }}</td>

Скрипт

<script>
        $(document).ready(function(){
          $("#celledit1" + $(this).data('id')).keyup(function (e) {
              if (e.keyCode == 13) {
                  // apply function
                  id = $(this).data('id');
                  male = 1;
                  female = 1;
                  $.ajax({
                      type: 'POST',
                      url: './editItem_enroll_male',
                      data: {
                          '_token': $('input[name=_token]').val(),
                          'id': id,
                          'male': male,
                          'female': female
                      },
                      success: function(data) {
                        if ((data.msg)) 
                      {
                        toastr.warning('Record not found! Record might has been deleted earlier or has been altered.', 'Oops Alert', {timeOut: 5000});
                         $("div#divLoading").removeClass('show');
                      }else{
                        toastr.success('Successfully updated this record!', 'Success Alert', {timeOut: 5000});
                      }
                      },
                  });
              }
          });
        });
    </script>

Может кто-нибудь из экспертов здесь решить мою проблему.Я признаю, что все еще в процессе обучения с использованием JS-скриптов, поэтому, пожалуйста, продолжайте.Спасибо.

Answer 1

Вы не можете сделать это так, как пытались, потому что this не будет элементом.Вместо этого вы можете использовать атрибут селектора [data-id].Или добавьте общий класс cell-edit и используйте его в качестве селектора, если селектор атрибута слишком широк.

И вам нужно использовать var

    $(document).ready(function(){
      $('[data-id]').keyup(function (e) {
          if (e.keyCode == 13) {
              // apply function
              var id = $(this).data('id');
              var male = 1;
              var female = 1;
              $.ajax({
                  type: 'POST',
                  url: './editItem_enroll_male',
                  data: {
                      '_token': $('input[name=_token]').val(),
                      'id': id,
                      'male': male,
                      'female': female
                  },
                  success: function(data) {
                    if ((data.msg)) 
                  {
                    toastr.warning('Record not found! Record might has been deleted earlier or has been altered.', 'Oops Alert', {timeOut: 5000});
                     $("div#divLoading").removeClass('show');
                  }else{
                    toastr.success('Successfully updated this record!', 'Success Alert', {timeOut: 5000});
                  }
                  },
              });
          }
      });
    });

Answer 2

изменить его на:

  $("#celledit1" + $('[data-id="id"]')).keyup(function (e) {
   });

, где data-id="your-id".