Малый и не частый опыт работы с jQuery сказывается, т.к. полученный в процессе работы опыт забывается из-за простоев.
Проблема была следующего характера да и как новичек в jQuery я не один страдаю её. Наверняка многие сталкивались когда с помощью jquery добавляли какие-то свой div'ы или p'араграфы и не могли производить над нимим манипуляции, ранее уже описные в своем файле скриптов. А дело то тут вот в чем.
При добавлении нового элемента на страничку DOM дерево обновляется, и если ваши обработчики были заточены на обработку именно $("p") элемента, который добавился к списку, то он не сработает. Вы спросите "НО ПОЧЕМУ?", а я отвечу. Потому что все ваши обработчики хранятся в объекте jQuery который и знать не знает что вы там хотите сделать и добавить.
Из этой ситуации есть 2 выхода:
- Использовать плагины livequery или jQuery Listen.
- Повесить обработчик на весь контейнер (бинго! как все просто).
Остановимся мы именно на втором варианте, т.к. первый меня не волнует, сами ебитесь с плагинами =)
Приведу немного кода:
У меня есть метод, который после того как добавился или убрался коментарий из списка обновляет весь список:
//Это его кусочек который нам сейчас важен.
$.ajax({
url: "/comments/getAll/",
success: function(html){
$("ul#commentsList").html(html);
},
dataType: "html"
});Как видите я AJAXом тяну из бакэнда уже сгенеренный для меня html-код, в нем получаю что-то такое:
<li><a href="#" class="comm" id="c9">Коммент1</a></li>
<li><a href="#" class="comm" id="c12">Коммент2</a></li>
<li><a href="#" class="comm" id="c17">Коммент3</a></li>
и помещаю в
<ul id="commentsList">
</ul>ну и теперь сам обработчик:
$("ul#packList").click(function(event){
//event.target.id; - это ИД того элемента на котором я кликнул
//event.target.text - это его содержимое
});Тут главное обратить внимание на нововведение - это объект event в моем случае, он то и наш спаситель.
При помощи его свойства target мы и получаем всю нужную для нас инфу.
Вот и капец, аллах акбар и боже, храни Королеву!
