javascript - 获取元素 id 并根据它执行 get 请求

Question

我使用这个元素来触发模态:

<i data-toggle="modal" id="'.$user->user_id.'" data-target="#modal-default" data-toggle="tooltip" title="Edit" class="fa fa-pencil-square-o"></i>

Javascript:

$('#modal-default').on('shown.bs.modal', function (e) {
  e.preventDefault();
  $('i').on('click', function(){
    id = $(this).attr('id');
  });
  $.ajax({
    method: "GET",
    url: baseURL + 'users/test/view/' + id,
    dataType: "json",
    success: function(data){
      $('#first').val(data.first_name);
      $('#last').val(data.last_name);
      $('#email').val(data.email);
      $('#phone').val(data.phone_number);
    }
  });
});

第一次单击图标时，模式会显示，但不包含任何数据。此外，不会执行对 url 的请求(不会出现在网络中)。控制台告诉我 id 未定义(在包含 url 的行上)。 如果我再次单击它而不重新加载页面，它就会起作用。

有什么办法可以让我在第一次点击时就可以完成这项工作吗？我该怎么办？

Answer 1

当计算以下代码时:

$('i').on('click', function(){
  id = $(this).attr('id');
});

正在声明 id 变量，但只有在用户单击 i 元素后才会填充该变量。

请注意，$.ajax 请求将在声明变量后立即触发，而不是在填充变量后触发。

您可能需要考虑将 $.ajax 调用移至 click 回调内。