javascript - ポップアップがすぐに閉じられるのはなぜですか？

Question

Jquery UIを使用してクリックするとポップアップを開きますが、このポップアップはすぐに閉じます。理由がわかりません。これが私のコードです：

function openPopUp() {
    //  alert("Handler for .click() called.");
        $("#dialog:ui-dialog").dialog("destroy");
        $("#select-method").dialog({
            modal : true,
            height: 573,
            width: 766 ,
            buttons : {
                Exporter : function() {
                    //$(this).dialog("close");
                     alert("Exporter");
                    // close the dialog
                },
                'Etat de surveillance' : function() {
                    //$(this).dialog("close");
                     alert("Etat de surveillance");
                    // close the dialog
                },
                Annuler : function() {
                    //$(this).dialog("close");
                     alert("Annuler");
                    // close the dialog
                }
            }
        });
    };

コードhtmlは次のとおりです。

<div id="other" class="popLink">This is text
        <a href="" class="popLink" onClick="openPopUp();">
        Click to open pop up
        </a>
</div>

<div class="noDisplay">
        <div id="select-method" title="selection des méthodes et calcul des provisions">My pop upis opened
            </div>
 </div>

Answer 1

1つのコメントが言うように、次のようなことを試してください。

onclick="openPopUp();return false;"

理にかなっていますが、すでにjQueryを使用しているので、インラインHTMLではなくjQueryでイベントをバインドします。onclick属性を指定する代わりに、これを次のように試して$(document).readyください。

$(".popLink").click(function (e) {
    e.preventDefault();
    // Either call openPopUp or copy/paste the code from that function into here - depends on how you actually use openPopUp throughout your whole site
});

しかし同時に、HTMLに何か奇妙なものがあります。同じクラス「popLink」を持つネストされたdivです。つまり、上記の私のコードを使用した場合、内側のコードをクリックすると、showPopUpが2回実行されます（伝播のため）。したがって、技術的にはこのバインディングを使用すると思います。

$("#other").on("click", ".popLink", function (e) {
    e.preventDefault();
    // Other code
});

これは技術的にclickイベントを要素#otherにバインドしますが、クラス「popLink」を持つその内部の要素によって引き起こされた場合にのみ実行されます。必要なターゲットを設定する方法は他にもいくつか<a>あるため、提供したコードが例であるか実際のものであるかによって異なります。

Answer 2

これを試して ：）

$('.popLink').click(function(e) {
  e.preventDefault();
  openPopUp();
});