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。< / p>

<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）返回这个，而不是那个。

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

1 个答案: