使用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应用于包装器,而不是应用于您注入的新元素.'append'方法返回您追加的元素,而不是您追加的元素.例如this.append(that)返回这个,而不是那个.