ФорумПрограммированиеПыхнуть хотите?F.A.Q. → Мини-статейка по jQuery или Почему не работает обработчик.

Мини-статейка по jQuery или Почему не работает обработчик.

  • disc

    Сообщения: 843 Репутация: N Группа: Джедаи

    Spritz 4 февраля 2009 г. 13:07

    Чтоб не надоедать форумчанам с нудными вопроса что да почему я решил взяться за свою проблему сам :).
    Малый и не частый опыт работы с 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 мы и получаем всю нужную для нас инфу.
    Вот и капец, аллах акбар и боже, храни Королеву!
  • phpdude

    Сообщения: 26646 Репутация: N Группа: в ухо

    Spritz 4 февраля 2009 г. 14:24, спустя 1 час 16 минут 41 секунду

    Группа: в ухо
    Сапожник без сапог
  • Trej Gun

    Сообщения: 5305 Репутация: N Группа: в ухо

    Spritz 4 февраля 2009 г. 14:46, спустя 21 минуту 46 секунд

    Использовать плагины livequery или jQuery Listen.

    в версии 1,3 это уже встроено в жуквери, метод live работает как bind

Пожалуйста, авторизуйтесь, чтобы написать комментарий!