Проблема c clone

[alixan23]

Добрый день уважаемые форумчане.

После использования функции clone (у jQuery) - дом дерево не видит новые элементы, которые были клонированы. Такое ощущение, что они не входят в общий scope.

Есть ли, какой-нибудь способ сделать, что-то вроде reInitialize всего дом дерева заново, чтобы новые клонированные элементы были бы включены в дом дерево?

Есть у кого какие мысли по этому поводу? Заранее благодарю всех за помощь и участие.

[ksa]

Есть у кого какие мысли по этому поводу?

Где тестовый пример?

[laimas]

После использования функции clone (у jQuery) - дом дерево не видит новые элементы, которые были клонированы.

Речь об обработчиках событий? Все верно, их ведь не было при установке обработчиков. Делегирование или назначать обработчики после добавления элементов на страницу.

[Nexus]

alixan23, jq.clone возвращает клон элемента, но не размещает его в DOM.

[alixan23]

ksa, сейчас будет.

[рони]

alixan23,
откройте для себя делегирование, поставьте клик на то что есть всегда! а не на те элементы которых нет или которые вы хотите заменить .

[alixan23]

laimas, и что вы посоветуете делать в таком случае?

Мне необходимо взаимодейстовать с новыми элементами. В каком направление копат?

[рони]

alixan23,
сюда копайте On

[alixan23]

ksa, вот набросанный примерчик

$( function()
      {

          $( "#sortable" ).sortable({
              revert: true
          });


          $( "#draggable3" ).draggable({
              connectToSortable: "#sortable",
              helper: "clone",
              revert: "invalid"
          });

          $( "ul, li" ).disableSelection();




          $(".add_field_button").click(function(e)
          {
              e.preventDefault();
              $(".input_fields_wrap").append('<div>' +
                  '                   key:   <input type="text" name="key[]"/>' +
                  '                   value: <input type="text" name="field[]"/>' +
                  '                   <a href="#" class="remove_field">Remove</a>' +
                  '               </div>');

          });

          $(".input_fields_wrap").on("click",".remove_field", function(e)
          {
              e.preventDefault();
              $(this).parent('div').remove();
              console.log("xxx: "+$(this).parent('div'));
          });

      });

<ul>
    <li id="draggable3" class="ui-state-highlight">
        <table cellpadding="2" cellspacing="2" border="0">
            <tr>
                <td colspan="2">SELECT</td>
            </tr>

            <tr>
                <td>Label:</td>
                <td><input name="label[]"></td>
            </tr>
            <tr>
                <td>Name:</td>
                <td><input name="name[]"></td>
            </tr>
            <tr>
                <td valign="top">Options:</td>
                <td>
                    <div class="input_fields_wrap">

                        key:   <input type="text" name="key[]">
                        value: <input type="text" name="field[]">
                        <button class="add_field_button" >+</button>
                    </div>


                </td>
            </tr>


        </table>
    </li>
</ul><br><br>
    <ul id="sortable">
        <li class="ui-state-default">test1</li>
        <li class="ui-state-default">test2</li>
    </ul>

Как видно из кода. Вначале элемент select можно клонировать путём Drag&Drop. После клонирования, с кнопочкой + можно увеличить количество Option.

Кнопочка "+" у клонированных элементов не работает.

[рони]

Кнопочка "+" у клонированных элементов не работает.

поставьте клик на то что есть всегда!

$("body").on("click",".add_field_button", function(e)