Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Проблема c clone (https://javascript.ru/forum/dom-window/71893-problema-c-clone.html)

alixan23 20.12.2017 15:43

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

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

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

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

ksa 20.12.2017 15:48

Цитата:

Сообщение от alixan23
Есть у кого какие мысли по этому поводу?

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

laimas 20.12.2017 15:50

Цитата:

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

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

Nexus 20.12.2017 15:50

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

alixan23 20.12.2017 15:50

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

рони 20.12.2017 15:52

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

alixan23 20.12.2017 15:52

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

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

рони 20.12.2017 15:55

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

alixan23 20.12.2017 16:27

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.

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

рони 20.12.2017 16:49

Цитата:

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

Цитата:

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

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


Часовой пояс GMT +3, время: 18:28.