Как обновлять javascript с помощью редактируемой страницы HTML и добавленных пользователем элементов на разных уровнях

Question

РЕДАКТИРОВАТЬ: для общего решения, это работало для меня. Привязка событий к динамически создаваемым элементам?

Итак, у меня есть интерфейс, который выглядит примерно так:

Пользователь может переключаться, чтобы показать или скрыть подсписки. Я использовал jquery, чтобы выбрать переключатели, чтобы они работали:

$(".dropdownBtn").click(function(){
  //rotate the button
  $(this).parent().toggleClass("caret-down");
  //hide the sublist
  $(this).closest("li").find(".active").toggleClass("nested");
})

Они также могут добавлять новые sub_elements к каждому элементу. Например, вот так:

$(".fa-plus-square").click(function(){
//if there's no new list, create a new unordered list
  if ($(this).closest("li").find("ul").length == 0){
    $(this).parents("li").append(newUL);
    //and add a toggle button
    $(this).parent().prepend(toggleBtn);
  }
  //add the element
  $(this).closest("li").find("ul").append("<li>newElement</li>")
})

Но тогда вновь добавленная кнопка переключения под элементом 3 не будет реагировать. Я считаю, что мне нужно «связать» недавно добавленную кнопку. Но я не уверен, как лучше это делать.