Question

我有一个对话框，当我双击可拖动元素时会打开该对话框。它的目的是在图像下面附加一个IP地址：

它工作正常，但只有在我关闭对话框并再次打开它之后，再单击“提交”按钮。

这是我的代码：

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

知道为什么会这样吗？任何输入将不胜感激。感谢。

Answer 1

我不确定，但你可以尝试一下。

首先，您的提交按钮无效，因为没有id = submit的元素（可能是display: none）。但是在用id = configbox打开对话框元素之后。提交按钮也在DOM上，因此下次打开对话框时，click事件被绑定以提交buttom。

您可以在打开如下对话框后添加点击事件。

$('.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;
        });

请尝试这个并发表评论。希望能帮助到你。

在对话框中找到的JQueryUI提交按钮仅在第二次打开对话框后才起作用

1 个答案: