2011-01-05 14 views
2

とマウスクリックの位置でのAJAXのポップアップは、私は方法は、私はそれが位置やりたいと思っています何ポジショニングjQueryの

$('.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の一部を返すAJAXリクエストを経由して、いくつかのデータを引き出し、このJavaScriptを持っていますポップアップは、ユーザーがクリックしたところでは、しかし、私はそれを得るために苦労して、いくつかの私を導くことができます、私はあまりにもポップアップを添付しようとしている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> 

このユーザーがリンクをクリックすると、ポップアップが表示されます、ユーザーがリンクをクリックした場所、それはページのレイアウトを乱さないように、それは理論的には、リンクの上でなければなりません。

+6

おはなしい神。 self.parent()。parent()。parent()?セレクタを使用することはできませんか?そうすれば、あなたのコードSUPERは移植性にあまりにも面倒です。 –

+1

ありがとう、私のコードがうんざりだとわかった、と私は簡単にラッパーに追加することができます –

答えて

6

はこれを試してみてください:

$('.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)はこれを返します。