JQueryUI Submit button found in dialog box only works after second time opening the dialog

Question

I have a dialog box which opens when I double click on the draggable element. It's purpose is to append an IP address underneath the image:

It works fine but only after I close the dialog box and open it again then click on the Submit button.

Here's my codes:

HTML

<div id="configbox" title="IPv6 Configuration" style="font-size:15px;">
    <form>
        <b>DHCP</b> <input type="radio" name="option" value="DHCP"/> &nbsp;

        <b>Auto Config</b>  <input type="radio" name="option" value="auto"/> &nbsp;

        <b>Static</b>  <input type="radio" name="option" value="static"/> &nbsp; <br/><br/>
        <table>
            <tr>
                <td>
                    <b>IPv6 Address:</b>
                </td>
                <td>
                    <input type="text" id="address" size="25"/> &nbsp; / &nbsp; <input type="text" id="subnet" size="3"/>
                </td>
            </tr>
            <tr>
                <td>
                    <b>Link Local Address:</b>
                </td>
                <td>
                    <input type="text" id="local" size="35"/>
                </td>
            </tr>
            <tr>
                <td>
                    <b>IPv6 Gateway:</b>
                </td>
                <td>
                    <input type="text" id="gateway" size="35"/>
                </td>
            </tr>
            <tr>
                <td>
                    <b>IPv6 DNS Server:</b>
                </td>
                <td>
                    <input type="text" id="dns" size="35"/>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </td>
            </tr>
        </table>
    </form>

    <center>
        <button id="submit"
                style="background-color:#B4BA22; border-radius:3px; font-size:17px; font-weight:bold; cursor:pointer;">Submit
        </button> &nbsp;
        <button id="cancel"
                style="border-radius:3px; font-size:17px; font-weight:bold; cursor:pointer;"> Cancel
        </button>
    </center>


</div>

JQuery

$(document).click(function (e) {
    // matches all children of droppable, change selector as needed

    currentDragImg = $(e.target).closest(".drag");



    if ($(e.target).closest(".drag").length > 0) {

        $(e.target).closest(".drag").find(".ui-resizable-handle").show();



    }
    else {
        $("#droppable").find(".ui-resizable-handle").hide();
        $("#tools").hide();
    }


    $('.drag').dblclick(function () { //the dialog box to enter the IP address opens on double click
        $('#configbox').dialog('open');
        return false;
    });

});

/*The submit button*/
        $(function () {
            $("#submit").click(function () {
                            enter = $("#address").val();
                            $("<div>"+enter+"</div>").appendTo(currentDragImg); 
                        });
    });

Any idea why this is happening? Any input will be appreciated. Thanks.

Please share your whole code.

rhitz
– rhitz

2016-01-08 04:58:46 +00:00
Commented Jan 8, 2016 at 4:58 — rhitz
– rhitz, Commented Jan 8, 2016 at 4:58

rhitz · Accepted Answer · 2016-01-08 05:06:05Z

I am not sure, but you might try this.

At first your submit button was not working, because there was not element with id = submit(Probably display: none) . But after you open the dialog i.e element with id = configbox. the submit button also was on DOM and hence next time you open the dialog box the click event was binded to submit buttom.

you can add the click event after opennng the dialog like below.

$('.drag').dblclick(function () { //the dialog box to enter the IP address opens on double click
            $('#configbox').dialog('open');
             $(function () {
                $("#submit").click(function () {
                                enter = $("#address").val();
                                $("<div>"+enter+"</div>").appendTo(currentDragImg); 
                            });
            return false;
        });

Please try this and comment. Hope it helps.

Collectives™ on Stack Overflow

JQueryUI Submit button found in dialog box only works after second time opening the dialog

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related