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

就像一个评论说的那样，尝试这样的事情:

onclick="openPopUp();return false;"

虽然这是有道理的，因为您已经在使用 jQuery，将事件与 jQuery 绑定(bind)，而不是内联 HTML。而不是指定 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将执行两次(因为传播)。所以我想我会在技术上使用这个绑定(bind):

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

这在技术上绑定(bind)了 click元素的事件 #other ，但仅当由其中具有类“popLink”的元素引起时才执行。还有其他几种方法可以定位 <a>你想要，所以这取决于你提供的代码是示例还是真实的。