0

ポップアップのように div を開こうとしていますが、onclick イベントをトリガーしたときにマウスがあった場所を中心にしています。マウスの位置を取得するために、この例に従っています

http://docs.jquery.com/Tutorials:Mouse_Position

jQuery(document).ready(function(){
   $("#special").click(function(e){
      $('#status2').html(e.pageX +', '+ e.pageY);
   }); 
})

その例では、クリック機能はクライアント側に設定されています。ただし、私のシナリオでは、サーバー側の onclick 関数を動的に作成された多くのオブジェクトに設定します。また、作成された各オブジェクトに固有の引数を関数に追加します。

私が直面している問題は、JQuery を使用せずに onclick イベントを設定すると、イベント引数 ("e") を取得できないように見えることです。

最終的に、私が達成しようとしていることの単純化された例は次のようになります。

<div id="divSubscription" style="display: none; height: 0px; width: 0px; position: absolute;">some content</div>     
<input type="button" id="btnOpenPopup" value="Open" onclick='openPopup(8, e)' />

    function openPopup(subID, e) {
        var x = e.pageX;
        var y = e.pageY;
        $("#divSubscription").css("top", y);
        $("#divSubscription").css("left", x);
        $("#divSubscription").css("display", "block");
        $("#divSubscription").animate({ height: "400px", width: "400px" }, 300, "swing");

        $("#divSubscriptionContent").html(subID);
    }

明らかに、これは機能しません。"e" が何であるかがわからないからです。私がやろうとしていることを達成する方法はありますか?

4

3 に答える 3

1

ID と data-id 属性の代わりにクラス名を使用して、ボタン固有のデータ (つまり、サブ ID) を保存します。

CSS:

jQuery(document).ready(function(){
   $(".special").click(function(e){
      var subID = $(this).attr('data-id'); 
      $("#divSubscriptionContent").html(subID);
   }); 
})

HTML:

<div id="divSubscription">some content</div>
<input class="special" data-id="8" type="button" id="btnOpenPopup" value="Open" />
于 2013-03-07T23:09:47.487 に答える
-1

個人的には、onclick を削除し、jquery または同様のフレームワークを使用してクリック ハンドラーをアタッチし、イベントをリッスンする必要があると思います。

単純に、jQuery を使用して

$('#btnOpenPopup').bind('click', {foo:bar}, openPopup(e));

これをブートストラップまたは初期化プロセスで行い、javascript を html ファイルに入れる習慣をやめてください。IMHO、必要なスクリプト インクルードは 1 つだけです。

于 2013-03-07T23:14:36.240 に答える
-1

#BUTTON_ANCESTOR がボタンを含む要素であるデリゲート イベントを使用してみてください。

 jQuery(document).ready(function(){
      $("#BUTTON_ANCESTOR").on('click', 'input[type=button]', (function(e){
           $('#status2').html(e.pageX +', '+ e.pageY);
      }); 
 })
于 2013-03-07T23:09:39.363 に答える