-1

フォームフィーンドを動的に追加および削除するソリューションをコーディングしています。

これが行動計画です。

緑色の「+」ボタンを押して、フォームの最後にまったく同じように別の入力を追加すると、ボタンが赤色の「x」ボタンに変わります。

赤い「x」ボタンを押すと、クリック/タッチされた入力が完全に削除されます。

最初の緑色のボタンを押すと、わかりました。それは私が望むものを正確に実行します。最初の赤も同じです。複数のボタンを削除または追加しようとすると、混乱が始まります。これにより、ページが読み込まれるときに機能する固有のボタンが 2 になります。

また、将来のバックエンド データベース レコードのために、すべての入力に新しい一意のクラスを追加する機能を実行する必要があると思います。しかし、私もそれを行う方法がわかりません。

ここにフィドルがあります：http://fiddle.jshell.net/Ja9yE/2/

$(document).ready(function(){
var newField = '<div class="field-wrapper"><input type="text" class="field" disabled="disabled" /><div class="button-holder"><div class="button-add"><img src="http://www.ricardostrobel.com.br/add-cancel-color.svg"></div></div></div>'

$(document).on("touchend mouseup",".button-add",function(e){
    e.stopPropagation(); e.preventDefault();
    $(this).removeClass("button-add").addClass("button-cancel");
    $(".field").removeAttr("disabled");

    $(newField).hide().appendTo("form").fadeIn(500);

});

$(document).on("touchend mouseup",".button-cancel", function(){
    $(this).closest(".field-wrapper").fadeOut("fast");          
});

});
4

2 に答える 2

0

新しい要素を作成または削除した後、イベント ハンドラーを再登録する必要があります。別のアプローチは、親 div のイベント ハンドラーを登録することです。どの子要素 ​​(.button-add または .button-cancel) がクリックされたかを確認し、クリックされた要素にロジックを適用します。

于 2013-08-22T02:37:12.523 に答える