как получить дочерние элементы из HTML-элемента

Question

У меня есть вар, сохраненный в моем JS пользовательского объекте (код ниже внутри класса):

var toolbar; 

this.create_toolbar = function() { 
    self.toolbar = document.createElement('div'); 
    $(self.toolbar) 
     .html('<ul>' + 
      '<li id="insert_bold"></li>' + 
      '<li id="insert_em"></li>' + 
      '<li id="insert_hyperlink"></li>' + 
      '<li id="insert_code"></li>' + 
      '<li id="insert_image"></li>' + 
      '</ul>') 
     .insertBefore(self.editTextarea); // just a textarea on the page 
} 

Панели получает создана и успешно разместила, а сама. панель инструментов теперь содержит объект для нового div. Однако, при попытке, чтобы связать <LI> «с до щелчков я не могу показаться, чтобы получить что-нибудь случиться:

$(self.toolbar).children("li#insert_bold").click(function() { 
    alert("just checking"); 
}); 

Чтобы быть ясно, после того, как выше, ничего не происходит, когда я нажимаю < Li ID = "insert_bold" >

Есть ли что-то, что мне не хватает? Я довольно новичок в jQuery .... могу ли я поместить переменную, содержащую [объект объекта] в $()? Если нет, как мне это сделать?

Answer 1

Вы должны использовать .find() здесь, как это:

$(self.toolbar).find("li#insert_bold").click(function() { 
    alert("just checking"); 
}); 

.children() смотрит только на непосредственных детей, <li> находится под <ul>, хотя, так что это не непосредственный ребенок.

---

Имейте в виду, хотя, если вы собираетесь на наличие нескольких экземпляров этого на странице (я предполагаю, что это, скорее всего, так), вы должны использовать классы вместо (идентификаторы должны быть уникальными), а затем использовать селектор классов, например: $(self.toolbar).find("li.insert_bold").

Answer 2

Пока Ник решил ваш вопрос, я не думаю, что это хорошая идея, особенно если у вас есть большое количество элементов HTML-привязки.

Когда у меня есть довольно небольшое количество, я собрать элементы в объекте внутри главного конструктора функции

this.el = { 
$button : $('.button','#div'), 
$submit : $('.submit','#div') 
}; 

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

this.el.$button.click(function() { 

}); 

Если у вас много элементов для решения проблемы, 20 или более, я рекомендую вам выбрать JavaScript FrameWork. Backbone Js - хороший.