Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Передал аяксом класс в <div>, но как отловить событите клик на этот класс ? (https://javascript.ru/forum/dom-window/28705-peredal-ayaksom-klass-v-div-no-kak-otlovit-sobytite-klik-na-ehtot-klass.html)

saturn 30.05.2012 14:29

Передал аяксом класс в <div>, но как отловить событите клик на этот класс ?
 
Помогите разобраться, меня этот вопрос уже мучает давно.
Как можно отловить событие клик на класс без перезагрузки страницы, когда я
это класс передал аяксом.

Amphiluke 30.05.2012 14:41

Повешайте обработчик события "click" на этот <div> сразу после окончания загрузки страницы, пусть в нем еще нет нужного элемента, который динамически подгружается с помощью AJAX. Поскольку событие "click" всплывает, то клик на дочерних элементах div`а будет пойман им на стадии всплытия. Даже если дочерние элементы будут добавлены уже потом. Чтобы отличить в таком обработчике, по кому именно кликнули, нужно проанализировать свойство target (или srcElement IE) объекта event, передаваемого в обработчик.

Если использовать jQuery, там все упрощается благодаря методам .on() и .delegate().



P.S. Черт. Похоже, я не въехал в проблему. Можно подробнее?

saturn 30.05.2012 15:01

Вот к примеру есть блок
<div class="one"></div>
По клику на него я отправляю данные с помощью $.post(); и при этом меняю класс one на two
$('.one').on('click', function(){
$.post('...');
$('.one').removeClass().addClass('two');
});

А я пытаюсь отловить событие клик без перезагрузки страницы на класс two.
У меня есть один вариант, но мне кажется что он не совсем правильный, это просто дописать в клике на one после того как добавляю класс two
$('.two').click(function(){
alert('Работает')
});

Amphiluke 30.05.2012 15:08

Цитата:

Сообщение от saturn
У меня есть один вариант, но мне кажется что он не совсем правильный

Вполне себе нормальный вариант.

Но можно прослушивать событие "click" на родительском элементе, в котором лежит div (даже на body или document).

(function($) {
    $(document).ready(function() {
        // вместо $("body") лучше подставить родителя div`а,
        // если он существует сразу при загрузке страницы
        $("body").on("click", ".two", function() { alert("Работает"); });
    });
})(jQuery);

saturn 30.05.2012 15:54

Спасибо за нормальные советы.

Deff 30.05.2012 16:34

saturn,
$('.two').live("click", function(){

http://jquery-docs.ru/Events/live/#typefn

saturn 30.05.2012 18:02

Deff
Хорошо что проверил пост, чуть большую часть кода не переписал.
Спасибо, выручили капитально, то что нужно.

Amphiluke 30.05.2012 20:24

saturn, имейте в виду, что метод .live() объявлен как «deprecated», и документация всячески рекомендует отказываться от него в пользу более производительных методов .on() и .delegate().

tadjik1 30.05.2012 21:00

As of jQuery 1.7, .delegate() has been superseded by the .on() method.

в общем, приходите к .on(), очень понятный, гибкий и действительно мощный (в плане функциональности) метод.

$('.two').on("click", function() {});

Deff 30.05.2012 23:00

tadjik1,
:write: Хорошо Вам танкистам... А у нас третий год 1.4.4.


Часовой пояс GMT +3, время: 11:46.