web-dev-qa-db-ja.com

jQuery：クローン要素とイベント

Ajaxを使用して新しいコンテンツ、.clone（）、append（）などを動的に作成するたびに、新しい要素はプログラムしたトリガーとイベントをすべて失います=（

コピーを作成した後、コピーされた要素でクラスを追加するなど、他の要素で機能する単純なものは機能しなくなります。新しいajaxコンテンツは機能しません。コマンドボタンは機能しなくなりました。私に何ができる？

このHTMLのクローンを作成していますが、コマンドボタンが機能しなくなりました。スパン要素のスタイリングは、CLONED要素では機能しなくなりました。

<div name="shows" id="x"><br/> <!-- The ID depends on the database-->
    <div name="shows" id="x">
        ID: <input disabled="disabled" size="7" value="x" name="id" />
        Status: 
        <select name="status" >
          <option selected="selected" >Display</option>
          <option >Hide</option>
        </select>
        <br/><br/>
        <span class="required" id="date_txt">*Date: </span><input type="text" value="" name="date" />
        &nbsp;&nbsp;
        <span class="required" id="title_txt">*Title: </span><input type="text" size="65" value="" name="title" />
        <br/>
        <span class="required" id="venue_txt">*Venue: </span><input type="text" size="45" value="" name="venue" />
        Telephone: <input type="text" value="" name="tel" />
        <br/>
        URL: <input type="text" size="100" value="" name="url" />
        <br/><br/>
        Address: <input type="text" size="45" value="" name="address" />
        &nbsp;&nbsp;
        <span class="required" id="city_txt">*City: </span><input type="text" value="" name="city" />
        <br/>
        State: <input type="text" value="" name="state" />
        Zip: <input type="text" value="" name="Zip" />
        <span id="country_txt">*Country: </span><input type="text" value="United States" name="country" />
        <br/>
        <br/>Comments: <br/>
        <textarea cols="80" rows="8" name="comments" ></textarea>
    </div>
    <!-- START OF:commands  -->
    <div id="commands" >
        <button name="edit" id="edit" >Edit</button> 
        <button name="delete" id="delete" >Delete</button>
    <br />
    <hr />
    <br />
    </div>
    <!-- END OF:commands  -->
</div>
<!-- END OF:new -->

新しいコメントが追加されました、2011年11月3日：

OK、問題を理解し、jQueryでエラーが発生しました。ここで、.clone（true）を追加すると、ほとんどすべてが機能します。


私の新しい問題はUIの日付ピッカーです。 HTMLのクローンを作成した後、新しくクローンされた日付フィールドをクリックすると、データのクローンが作成された（古い）日付フィールドにフォーカスが移動します。さらに、日付を選択すると、値は古い日付フィールドに移動します-新しく複製された日付フィールドではありません。

これが私のajaxコードです（送信が成功した後）：

UI日付ピッカーコード：

$("input[name='date']").datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true});

Ajax：

    ...ajax code...
function(data)
{
var $msg = eval(data);
if( $msg[0] == 1 )
    {
    //#var.new
        $id = '#'+$msg[1];
        $data = $("#new");
    $new = $data.clone(true);
    $new.find('input.datefield').datepicker();


        $new.attr("id", $id);
        $new.children('[name="id"]').val($id);
        $new.children('[name="id"]').attr("value", $id);
        $new.children(":input").each(function() { var $value = $(this).val(); $(this).attr("value", $value); });
        $new.prepend( "<br/>" );

        $commands = $("#blank").children("#commands").clone(true);
        $commands.children("#add").text("Update");
        $commands.children("#add").attr("pk", $id);
        $commands.children("#add").attr("name", "update");
        $commands.children("#add").attr("id", "update");

        $commands.children("#reset").text("Delete");
        $commands.children("#reset").attr("pk", $id);
        $commands.children("#reset").attr("name", "delete");
        $commands.children("#reset").attr("id", "delete");

        $new.append( $commands );

        //#animation
        //blank.slideUp
        $("#blank").slideUp(2500, function(){
        $("#ADDNEW").html("&#9658; New:");
        //$("#blank").clone().prependTo( $("#active") );
        //$("#blank").prependTo( "#active" );

        //active.slideUp
        $("#active").slideUp("slow", function(){
        $("#ON").html("&#9658; Active:");
        $("#active").prepend( $new );
        $('#reset').trigger('click');

        //active.slideDown
        $("#active").slideDown(8500, function(){
        $("#ON").html("&#9660; Active:");

        //blank.slideDown
        $("#blank").slideDown(3500, function(){
        $("#ADDNEW").html("&#9660; New:");
        load_bar(0);

        }); //end: anumation.#blank.slideDown
        }); //end: anumation.#active.slideDown
        }); //end: anumation.#blank.slideUp
        }); //end: anumation.#active.slideUp

        //$("#new").fadeOut(2000, function(){
        //START: blank
        //alert( $("#blank").html() );
        //$dad = $("#new");
        //$dad.children('input[name!="id"][name!="country"], textarea').val('');
        //$dad.children('[name="country"]').val("United States");
        //$dad.children('[name="date"]').focus();
        //END: blank
        //$("#new").fadeIn(2000, function(){
        //alert( $msg );
        //}); //end: anumation.fadeIn
        //}); //end: anumation.fadeOut
        } //end: if
    else
        {
        //var varMSG = data;
        //alert( "Hello" );
        alert( $msg );

        //$("#add").attr("disabled", false);
        //$("#reset").attr("disabled", false);
        load_bar(0);
        } //end: if.else
    }//end: $.post.function
); //END:$.post
}); 
//END:ajax
javascriptjqueryeventsappendclone
17
Omar

.clone( true )がそのトリックを行います。

ドキュメント： http://api.jquery.com/clone/

41
Šime Vidas

こんにちは私は少し似たユースケースを持っています、私はボタンを含むいくつかの動的に生成されたコンテンツを持っています、クリックイベントは元のボタンに応答していますが、生成されたものではありません、私は以前に行いました：

$('.someclass').on('click', function() {

しかし、私はこのようにオンをライブに置き換えることで問題を解決しました：

$('.someclass').live('click', function() {
1
krachleur

ハンドラーが$（ '。class'）。click（...）のようなものを使用してセットアップされている場合

代わりに次のようなものを試してください：$（ '。class'）。live（ 'click'、...）

Liveは、まだ存在していない可能性のあるクラスを持つ要素に適用されます。

0
Cory Kendall

私はついにUI日付ピッカーが正しく機能するようになりました。クローンを作成する前にdatepickerを完全に削除し、要素のクローンを作成した後に追加する必要がありました。 UIの人たちは、私たちにとってそれを簡単にするはずです。フィギュアに行こう！

クローンを作成する直前：

//#datepicker
$("input[name='date']").datepicker( "destroy" );
$("input[name='date']").removeClass("hasDatepicker").removeAttr('id');

クローン作成後：

$("input[name='date']").datepicker({ dateFormat: 'yy-mm-dd', changeMonth: true, changeYear: true, numberOfMonths: 3, showButtonPanel: true});
0
Omar