Question

I use Jquery UI to open a pop up on a click but this pop up is closed immediately.I don’t understand why?
Here is my code:

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
                }
            }
        });
    };

The code html is:

<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

Like the one comment says, try something like this:

onclick="openPopUp();return false;"

Although it would make sense, since you’re already using jQuery, to bind the event with jQuery, not inline HTML. Instead of specifying the onclick attribute, try this in $(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
});

But at the same time, you have something weird in your HTML – nested divs with the same class “popLink”. Which means that if you used my code above, when you click on the inner one, the showPopUp will execute twice (because of propagation). So I guess I would technically use this binding:

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

This technically binds the click event to the element #other, but only is executed if caused by an element inside of it that has the class “popLink”. There are several other ways to target the <a> you want, so it depends on if the code you provided is an example or is real.