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

【问题标题】：Positioning an ajax popup at position of mouse click with jQuery使用jQuery将ajax弹出窗口定位在鼠标单击的位置
【发布时间】：2011-01-06 07:34:09
【问题描述】：

我有这个 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>

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

【问题讨论】：

天哪。 self.parent().parent().parent()？你不能为此使用选择器吗？这使您的代码对可移植性非常不友好。
谢谢你，让我意识到我的代码很垃圾，我可以很容易地将它附加到包装器中

标签： jquery html css ajax

【解决方案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) 返回这个，而不是那个。

【讨论】：