jquery - 使用 jQuery 将 ajax 弹出窗口定位在鼠标单击的位置

Question

我有这个 javascript，它通过 ajax 请求提取一些数据，该方法返回一部分 html，

  $('.tooltip_target').click(function(e){
    $('.tooltip').remove();
    var self = $(this);
    $.ajax({
     type: "POST",
     url: self.attr('href'),
     data: "",
      success: function(html){
       var popup = html
       self.parent().parent().parent().append(html).css({
         position: "absolute",
         top: e.pageY,
         left: e.pageX
       });
      }
    });
    e.preventDefault();
  });

我想做的是将弹出窗口绝对定位在用户单击的位置，但是我正在努力使其正确，请有人指导我，下面是我也尝试附加弹出窗口的 HTML。

<div id="wrapper">
    <li>
        <a href="/jobwall/viewjob/<?php echo $job['employer_id'];?>" class="tooltip_target">
            <img src="<?php echo base_url();?>media/images/employers/<?php echo $job['logo_filename'];?>" />
        </a>
    </li>
</div>

这个用户点击链接，应该出现弹窗，在用户点击链接的地方，理论上它应该在链接的顶部，这样就不会干扰页面布局。

Answer 1

试试这个:

$('.tooltip_target').click(function(e){
  $('.tooltip').remove();
  $.ajax({
    type: "POST",
    url: $(this).attr('href'),
    data: "",
    success: function(html){
      $(html).css({
        position: "absolute",
        top: e.pageY,
        left: e.pageX
      }).appendTo('#wrapper');
    }
  });
  e.preventDefault();
});

问题是您将 css 应用于包装器，而不是您注入(inject)的新元素。 'append' 方法返回您附加到的元素，而不是您附加的元素。例如。 this.append(that) 返回这个，而不是那个。