Доступ к динамически созданному элементу с помощью селектора

#javascript #jquery

Вопрос:

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

 var el = $("<input class='form-area' id='myTest'></input>");
$("#myElement").append(el);

// works fine
el.val("80");

// what I'd like to do
$("#myTest").val("80");

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

 MyAppendFunction().promise().done(function() {
    $("#myTest").val("80");
}

Поскольку мне нужно создать несколько таких входных данных, и их количество варьируется (строки для таблиц), было бы очень хорошо, если бы я мог выбирать их с помощью jQuery selector вместо того, чтобы хранить ссылки на них в списке.

1. Ваш код работает нормально, как вы можете видеть здесь: jsfiddle.net/rtbv475g . Одна из причин, по которой это не сработает, заключается в том, что у вас есть несколько элементов с одинаковым идентификатором myTest . В этом случае вам нужно создать уникальные идентификаторы или использовать класс.

2. Также обратите внимание, что append() это синхронная операция, поэтому попытка вернуть из нее обещание является избыточным усложнением.

3. Я убедился, что идентификаторы уникальны. Я создаю элементы после вызова ajax, может ли это что-то изменить?

4. Вам нужно убедиться, что вы вызываете val() обратный вызов, в который вы добавляете новый HTML, тогда он будет работать. Не могли бы вы отредактировать вопрос, чтобы показать более полный пример вашего JS, включая ваш вызов AJAX

5. Я попытался выбрать элемент и сделать с ним что-то тривиальное, например $(«#MyTest»).fadeOut(), просто чтобы посмотреть, работает ли выбор. Я отредактирую вопрос, спасибо за ваши ответы, оценил.

Ответ №1:

Вы, конечно, перебираете элементы, которые вы добавляете в свой DOM, поэтому используйте индекс, чтобы присвоить им уникальные идентификаторы, такие как: YOURLOOP { …

 id = `myTest-${YOURINDEX}`
var el = $("<input class='form-area' id='"   id  "myTest'></input>");
..
}

Чтобы получить доступ к любому из этих элементов, просто используйте элемент (нажатую кнопку, привязку, .. ), Чтобы получить элемент «sibling, parent, next» с идентификатором, начинающимся с «MyTest»:
$(‘#yourrferenced-element’).next(«[id^ =’MyTest-‘]»).attr(‘id’), чтобы получить его идентификатор, а затем сделайте то, что вы хотите с ним сделать.

1. В комментариях вы можете прочитать, что все идентификаторы уникальны. респ за попытку помочь.

2. Все в порядке. Я отредактировал свой ответ: я не видел комментариев, когда писал свой ответ.

3. Код довольно тяжелый, я просто буду придерживаться ссылок на список.

4. Я думаю, вы смогли присвоить элементам <inputs>, которые вы добавили в уникальные идентификаторы DOM. Проблема в том, что нужно получить доступ к любому из них, верно? Но нам нужен ваш сценарий: когда вам нужно определить правильный из них? после нажатия кнопки / привязки?

5. не волнуйся, я как-нибудь разберусь