0

2つの領域があります。1つは有効なアイテム用で、もう1つは無効なアイテム用です。ユーザーは[追加]をクリックして、コンテンツを有効な領域に送信できます。

問題は、フォームのクラスを変更して、追加ではなく削除にした場合、何も起こらないことです。

私はこの問題のjsfiddleを作成しました。1回だけでなく、何度でも切り替えることができるはずです。

ソースでクラス名が実際に変更されていることがわかりますが、私のjQuery関数は変更を認識していないようです。

以下のjsfiddle-exampleを参照してください。

http://jsfiddle.net/crW9m/7/

これが私のHTMLマークアップです：

<div class="added">
<form class="add">
<h3>One item </h3>
 <input type="submit" value="Add" />
</form>
    </div>


 <div class="deleted">
    <form class="delete">
        <h3>Second item </h3>    
         <input type="submit" value="Delete" />
    </form>
    </div>

    <div id="destination">
        <p>Destination for added items</p>
    </div>
    <div id="destination2">
        <p>Destination for deleted items</p>
    </div>

それに付随するjQueryコードは次のとおりです。

    $(document).ready(function() {
    $(".add").click(function(event){

    var $form = $(this),           
        $inputs = $form.find("input, select, button, textarea"),            
        serializedData = $form.serialize();


            $form.removeClass("add").addClass("delete");
        $inputs.val('Delete');
            $form.appendTo("#destination");


    // prevent default posting of form
    event.preventDefault();
    });

       $(".delete").click(function(event){        
        var $form = $(this),        
        $inputs = $form.find("input, select, button, textarea"),

        serializedData = $form.serialize();


            //var submit = $form.find(":submit").hide();
            $form.removeClass("delete").addClass("add");
            $inputs.val('Add');
            $form.appendTo("#destination2");


    // prevent default posting of form
    event.preventDefault();
    });     


  });
​
4

2 に答える 2

1

スクリプトの更新バージョンを作成しました。

http://jsfiddle.net/crW9m/9/

私の唯一の変更は、クリックイベントの代わりにデリゲート（jQuery関数on ）を使用することでした。クリックイベントは、スクリプトの実行時にセレクターに一致する実際の要素に追加されます（通常はページの読み込み時）。他の要素が後で追加された場合、イベントは一般的なセレクターではなく特定の要素に追加されたため、イベントの影響を受けません。デリゲートは、実際のイベントで一致する要素をチェックすることでこれを解決します。

// $(".delete").click(function(event){ /*...*/ }); // Replace this with:
$(document).on('click', '.delete', function(event){ /*...*/ });

// $(".add").click(function(event){ /*...*/ }); // And replace this with:
$(document).on('click', '.add', function(event){ /*...*/ });
于 2012-10-22T11:14:03.213 に答える
-1

問題は、クリックイベントへのバインドがドキュメントの読み込み時に行われ、要素クラスを変更するだけではこのバインドに影響しないことです。live()バインディングの代わりにjQueryメソッドを使用します。

$(".add").live("click", function(event){

それ以外の

$(".add").click(function(event){

これがjsfiddleです：http：//jsfiddle.net/crW9m/8/

于 2012-10-22T11:18:56.663 に答える