Question

我第一次使用JQuery，而且我一直在使用JQuery UI对话框示例。我用一些额外的输入扩展了它。

我在不同浏览器中遇到奇怪的行为。

当我尝试IE时，附加按预期工作。

当我尝试使用Chrome时，附加功能会有效，但会附加两次。

当我尝试使用FireFox时，页面上会显示该表单。加载对话框时，只显示表单前的文本。单击“添加尺寸”按钮会添加一个空行。

这是我第二天的实验，所以我可能做了很多错事。

如何创建一个对话框，使用三个浏览器正确附加表单中的条目？

任何建议都将不胜感激。

以下是我正在使用的代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

$（函数（）{

    var     dClass = $("#dClass"),
        dWeight = $("#dWeight"),
        dLength = $("#dLength"),
        dWidth = $("#dWidth"),
        dHeight = $("#dHeight"),
        WeightMetric = $("#WeightMetric"),
        LxWxHMetric = $("#LxWxHMetric");

    $("#dialogExample").dialog({
        autoOpen:false,
        modal:  true,
        buttons: {
              'Add dimensions': function(){
                        $('#dimensions tbody').append('<tr>' +
                            '<td>' + dClass.val() + '</td>' +
                            '<td>' + dWeight.val() + '</td>' +
                            '<td>' + WeightMetric.val() + '</td>' +
                            '<td>' + dLength.val() + '</td>' +
                            '<td>' + dWidth.val() + '</td>' +
                            '<td>' + dHeight.val() + '</td>' +
                            '<td>' + LxWxHMetric.val() + '</td>' +
                            '</tr>');
                        $(this).dialog('close');
                        }
             },
             Cancel:  function(){
                    $(this).dialog('close');
             }
    });

    $('#add-dimensions')
            .button()
            .click(function(){
                $('#dialogExample').dialog('open');
            });
});
</script>

类：重量： L：宽： H：

    <div>
    <button id='add-dimensions'>Add</button>
    </div>
</div>

<div style="display: none;" id="dialogExample" title="Add Dimensions">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sollicitudin. Sed interdum pulvinar justo. Nam iaculis volutpat ligula. Integer vitae 

felis quis diam laoreet ullamcorper. Etiam tincidunt est vitae est.

<form>
<fieldset>
    <label for="dClass">Class:  </label>
    <input type="text" name="dClass" id="dClass" class="text ui-widget-content ui-corner-all" />

    <label for="dWeight">Weight:  </label>
    <input type="text" name="dWeight" id="dWeight" class="text ui-widget-content ui-corner-all" />

    <select id="WeightMetric">
                <option value="Metric1">metric 1</option>
                <option value="Metric2">metric 2</option>
                <option value="Metric3">metric 3</option>
        </select>

    <label for="dLength">L:  </label>
    <input type="text" name="dLength" id="dLength" class="text ui-widget-content ui-corner-all" />

    <label for="dWidth">W:  </label>
    <input type="text" name="dWidth" id="dWidth" class="text ui-widget-content ui-corner-all" />

    <label for="dHeight">H:  </label>
    <input type="text" name="dHeight" id="dHeight" class="text ui-widget-content ui-corner-all" />

    <select id="LxWxHMetric">
            <option value="Metric1">metric 1</option>
            <option value="Metric2">metric 2</option>
            <option value="Metric3">metric 3</option>
    </select>
</fieldset>
</form>
</div>
</body>

Answer 1

问题是格式错误的HTML。我错过了html中的几个关键结束标记。这就是我使用没有咖啡因的普通旧记事本所得到的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

$（document）.ready（function（）{

        var dClass = $("#dClass"),
        dWeight = $("#dWeight"),
        dLength = $("#dLength"),
        dWidth = $("#dWidth"),
        dHeight = $("#dHeight"),
        WeightMetric = $("#WeightMetric"),
        LxWxHMetric = $("#LxWxHMetric");

        $("#dialogExample").dialog({
            autoOpen: false,
            modal: true,
            buttons: {
                'Add dimensions': function () {
                    $('#dimensions tbody').append('<tr>' +
                            '<td>' + dClass.val() + '</td>' +
                            '<td>' + dWeight.val() + '</td>' +
                            '<td>' + WeightMetric.val() + '</td>' +
                            '<td>' + dLength.val() + '</td>' +
                            '<td>' + dWidth.val() + '</td>' +
                            '<td>' + dHeight.val() + '</td>' +
                            '<td>' + LxWxHMetric.val() + '</td>' +
                            '</tr>');
                    $(this).dialog('close');
                }
            },
            Cancel: function () {
                $(this).dialog('close');
            }
        });

        $('#add-dimensions')
            .button()
            .click(function () {
                $('#dialogExample').dialog('open');
            });
    });
</script>

类：重量： L：宽： H：加 Lorem ipsum dolor坐在amet，consectetuer adipiscing elit。 Aenean sollicitudin。桑达 interdum pulvinar justo。 Nam iaculis volutpat ligula。整数felis quis diam laoreet ullamcorper。 Etiam tincidunt est vitae est。类：重量：指标1 指标2 指标3 L：宽： H：指标1 指标2 指标3

JQuery对话框表单行为问题

1 个答案: