javascript cloneNode () не работает должным образом - PullRequest
Новая
       53

javascript cloneNode () не работает должным образом

0 голосов
/ 10 марта 2020

У меня на странице html есть элемент select с id = "a" (например). У меня есть функция с именем f (). когда я пишу 

$("#a").on("change",f);

, это работает, то есть каждый раз, когда я меняю выбранное значение в выпадающем списке, вызывается функция f ().

Я хочу клонировать этот выбор в другом место на странице. У меня есть этот код: 

var oldSelect=$("#a")
var newSelect=oldSelect[0].cloneNode(true);
newSelect.id="b";
$("#b").on("change",f);

, и когда я изменяю выбранное значение в новом раскрывающемся списке, функция f () не вызывается.

Я попытался отладить его с помощью chrome devTools, и, по-видимому, $ ("# a") является видом массива длиной 1, который, в первую очередь, имеет сам select. Но $ ("# b") не имеет свойства "0", содержащего сам селект.

Кто-нибудь знает, почему это происходит? как я могу клонировать элемент select со всеми его опциями и обратными вызовами?

1 Ответ

2 голосов
/ 10 марта 2020

Несмотря на то, что вы клонировали существующий #a, вы еще не вставили его в документ в показанном вами коде, поэтому $("#b") не даст вам никаких элементов взамен. Либо вставьте его перед выбором с помощью $, например: 

$(container).append(newSelect);
$("#b").on("change",f);

, где container - это элемент, к которому вы хотите добавить новый <select>.

, либо добавьте слушателя непосредственно к элементу, вместо того, чтобы выбирать его снова: 

var newSelect=oldSelect.clone(true);
newSelect
  .prop('id', 'b')
  .on("change",f)
  .appendTo(container);

(Обратите внимание, что в приведенном выше примере newSelect - это коллекция jQuery, а не HTMLSelectElement.) 

const f = () => console.log('change');

var oldSelect = $("#a");
oldSelect.on("change",f);

var newSelect = oldSelect.clone(true);
newSelect
  .prop('id', 'b')
  .on("change", f)
  .appendTo('#container');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <select id="a">
    <option>Option A</option>
    <option>Option B</option>
  </select>
</div>
...