JQuery: элементы и события клона

Когда я использую ajax для динамического создания нового содержимого,.clone(), append() и т.д., новый элемент теряет любые триггеры и события, которые я запрограммировал = (

После создания копии, простые вещи, которые РАБОТАЮТ на других элементах, таких как добавление класса, на скопированные элементы больше не работают. Любое новое содержимое ajax не работает. Командные кнопки больше не работают. Что я могу сделать?

Я клонирую этот HTML, и кнопки команд больше не работают. Стилирование элементов span больше не работает с элементами 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 -->

Добавлены новые комментарии, 11/03/2011:

ОК, я выяснил проблему, и у меня была ошибка в моем jQuery. Теперь, когда я добавляю .clone(true) ALMOST, все работает.


Моя новая проблема - пользовательский идентификатор даты. После клонирования 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

Ответы

Ответ 2

Привет, у меня есть похожий вариант использования, у меня есть динамически сгенерированный контент, содержащий кнопку, событие click реагирует на исходную кнопку, но не сгенерировано, Я сделал это раньше:

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

но я решил свою проблему, заменив on на live следующим образом:

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

Ответ 3

Если ваши обработчики настроены с помощью чего-то вроде   $ ('. class'). click (...)

Попробуйте что-то вроде этого:   $ ('. class'). live ('click',...)

Live применяется к элементам с классом, который еще не существует.

Ответ 4

Наконец-то я получил фишку для пользовательского интерфейса, чтобы работать правильно. Я должен был полностью удалить datepicker ПЕРЕД клонированием и добавить его ПОСЛЕ клонирования элементов. Ребята в пользовательском интерфейсе должны сделать это проще для нас. Пойдите фигурой!

Перед клонированием:

//#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});