如何在jQuery函数中将元素ID与数据ID结合?

时间:2018-12-10 07:56:16

标签: jquery ajax

我有一个按ENTER键的功能,但是当我将元素ID与它的行ID或数据ID结合使用时,它不起作用。这是代码:

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脚本进行学习,因此请理解我。谢谢。

2 个答案:

答案 0 :(得分: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});
                  }
                  },
              });
          }
      });
    });

答案 1 :(得分:0)

将其更改为:

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

其中data-id="your-id"