Как включить переменную в селектор jQuery?
В моем JavaScript у меня есть переменная с именем counter. И я хочу добавить его к идентификатору выбранного тега, который я динамически создал с помощью своего скрипта, например:
// Creating a <div>
var random_div = $(document.createElement('div'))
.attr("class", "col-md-7");
counter = 5;
random_div.after().html('<select multiple class = "js-example-basic-multiple" name = "tal' + counter + '" id = "tal' + counter + '" > </select>');
random_div.appendTo(main_div);
Теперь я пытаюсь определить ширину этого недавно созданного тега select, но это не работает.
$("#tal" + counter).select2({width: 'resolve'});
Я даже пробовал это с другой переменной, но это тоже не работает.
var testing = '#tal' + counter;
$(testing).select2({width: 'resolve'});
Теперь, если я жестко закодирую это, чтобы сказать $("#tal5").select2({width: 'resolve'});, это сработает.
Это действительно элементарно, но я не могу найти решение.
моя ошибка, обновил вопрос
Вы убедились, что counter содержит 5?
Да, я сделал console.info, чтобы убедиться, что
Здесь работает jsfiddle.net/mfkygqd2
Можете ли вы показать пример сгенерированного HTML после его внедрения?
Я не вижу проблемы с селектором, возможно, что-то не так со счетчиком.
почему в коде выбора есть </div>? Это будет сложно отладить без примера, показывающего проблему. Код должен работать, так что, возможно, это что-то другое».
Что с after()??
@epascarello удалил div, мой плохой
@Keith не работает с моим тегом select
кажется, здесь тоже работает jsfiddle.net/mfkygqd2
@epascarello after() используется для создания динамического элемента div по нажатию кнопки. Как только этот div сгенерирован, я создаю свой тег select, используя .html(), а затем определяю его ширину.
извините, я обновил не тот jsfiddle.net/k2yxj89h
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Не ищите элемент, сгенерируйте элемент с помощью jQuery и используйте ссылку
const select = $('<select ...></select'); // make the select
yourElem.append(select) // add it
select.select2({width: 'resolve'}); // fire the select2
Это прекрасно работает, однако в моем реальном коде вместо тега select у меня также есть теги h5 и div, такие как <h5> .. </h5> <div> <select> ... </select></div>, и ваш код выдает мне ошибку для этого. Что бы вы порекомендовали?
поэтому выберите тег из него .... const myElems = $('<div><select></select></div>') myElems.find("select").select2()
Спасибо, отлично сработало. Хотя я по-прежнему использовал свой первоначальный способ использования after(), поскольку расстояние между элементами на странице по какой-то причине было странным, если я попробовал ваш подход. И просто добавил random_div.find("select").select2({width: 'resolve'}); вместо использования селектора jQuery.
Есть некоторые ошибки js из-за пропуска одинарных и двойных кавычек.
var random_div = $(document.createElement('div'))
.attr("class", "col-md-7");
counter = 5;
random_div.after().html('<select multiple class = "js-example-basic-multiple" name = "tal'+counter+'" id = "tal'+counter+'" > </select>');
console.info($(random_div).find('#tal'+counter)[0])<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>попробуй так, теперь работает
В вашем жестко запрограммированном примере вы имели в виду «# tal5»? Или "тал5" сработал?