0
Я пытаюсь создать страницу, в которой элементы списка динамически добавляются под элементом «ul».Jquery on click не работает после события изменения на selectmenu
- Когда элемент списка будет нажата, она будет открыта selectmenu (JQuery плагин)
- Пользователь будет выбрать одно из значений, после чего selectmenu нужно закрыть (скрыть)
- выбранное значение из меню заносится в текст элемента списка, который был нажат, чтобы всплывающее меню.
- После того как текст элемента списка заполняется динамически добавить еще один элемент списка под ним
- Теперь пользователь должен иметь возможность повторить с шагом 1 до 4.
Я могу сделать шаги с 1 по 4 первых время, но после того, как selectmenu скрыт, клики по вновь добавленному элементу списка или любому из ранее добавленных списков не распознаются.
Я не могу понять, где все я ошибаюсь. Ниже приведен код html и jquery. Все указатели будут оценены
HTML
<body>
<div class="container">
<ul class="tree">
<li class="connection" id="connection1">-------------</li>
</ul>
</div>
</body>
<div class="selection">
<select id="my-select" name="character" multiple="multiple">
<optgroup label="The Griffins">
<option value="Peter">Peter Griffin</option>
<option value="Lois">Lois Griffin</option>
<option value="Chris">Chris Griffin</option>
<option value="Meg">Meg Griffin</option>
<option value="Stewie">Stewie Griffin</option>
</optgroup>
<optgroup label="Peter's Friends">
<option value="Cleveland">Cleveland Brown</option>
<option value="Joe">Joe Swanson</option>
<option value="Quagmire">Glenn Quagmire</option>
</optgroup>
<option value="Evil Monkey">Evil Monkey</option>
</select>
</div>
Javascript для функции мыши
var i = 1;
$('body').on("click", ".connection", function() {
var connectionid = $(this).attr('id');
$("#my-select").selectmenu({
change: function (event, data) {
var selectedText = $(this).val();
$("#connection" + i).text(selectedText);
$(".selection").hide();
i++;
var id = "connection" + i;
$("#" + connectionid).append("<li class='connection' id=" + id + ">-------------</li> ")
}
})
});