Search code examples
jqueryjquery-uidialogjquery-dialog

jquery dialog works when autoOpen is used, but not when .click is used

<script>
$(function() {
    $( "#dialogwindow" ).dialog({
        height: 140,
        width: 400,
        zIndex: 999,
        autoOpen: false,
        modal: true
    });

    $( ".loginbtn" ).click(function() {
        $("#dialogwindow").dialog("open");
        return false;
    });
});
</script>

Is linked with:

<a class="loginbtn" href="#">Login</a>

and the div:

<div id="dialogwindow">
<p>Hello world</p>
</div>

If the dialog has autoOpen: true and no .click event, it works. Once the .click event is added, clicking the link does nothing.

Edit: The test site is located at http://kinnill.com/dev/raymondjames

Solution

  • As per the comment by Wirey I changed the '#header a' string of the erroneous script to '#navlinks a'. The dialog now functions as it should.