2

ボタンを宣言しました：

<button id="create" type="button">add div</button>

そして、次のように、jQuery UI ダイアログ ボックスを使用してボタンをクリックするたびに、ドキュメントの本文に新しい div 要素を追加したいと考えています。

var form = $("<div>", {id:"form"});

    form.append(
        $("<input>")
            .attr({
                "type" : "text",
                "id" : "user-input"
            })
    )
    .dialog({
        width: 600,
        buttons: {
            "Ok": function() {
                var new_div = $("<div>").html($("#user-input").val()).addClass("destiny_div");
                new_div.appendTo($("body"));
                $(this).dialog("close");
            }}
    });

ボタンを初めてクリックすると正常に動作しますが、2 回目に入力テキスト ボックスに書き込んだテキストが新しい値で更新されず、代わりに最初に配置された値が取得されます。

たとえば、最初に「hello」と入力して「ok」ボタンをクリックすると、本文に「hello」というテキストを含む新しい div が追加されますが、2 回目に入力すると、次のように入力されます。 「さようなら」、新しい div が追加されますが、「さようなら」の代わりに「こんにちは」というテキストが含まれています。

これが私が持っているコードです: http://jsfiddle.net/vWQ9T/

なぜこのように機能しているのかについてのアイデアはありますか? ありがとう

4

1 に答える 1

5

div を挿入するたびにダイアログが追加されます。そのため、ボタンを 2 回クリック#user-inputすると、最初のダイアログから最初のものが取得されます。したがって、close-Parameter を使用してダイアログを閉じた後、フォームを削除する必要があります。

close: function () {
    form.remove()
}

更新された jsfiddle をご覧ください: http://jsfiddle.net/vWQ9T/1/

于 2012-06-13T14:58:39.827 に答える