2

Вот, допустим, простой код:

$('[data-modal]').on('click', function() {
// Если есть на странице модальное окно - открываем его
    if( $($(this).attr('data-modal')).length ) {
        show_modal( $(this).attr('data-modal') );
    } else {
// Если нету - загружаем по AJAX и открываем
        var data_modal_rpl = $(this).attr('data-modal').replace('#', '');
        $('body').load('/ajax/load/'+data_modal_rpl+'.php');
        show_modal( $(this).attr('data-modal') );
    }
    return false;
});
// А тут мы уже закрываем модальное окошко при нажатии на определенные кнопки.
$('.modal_close, .modal_close_bg').on('click', function() {
    hide_modal();
    return false;
});

Вот собственно проблема в том, что, в данном случае, код по закрытию окошек обрабатывает только те кнопки, которые уже есть на странице. А те, что подгружены по AJAX - нет.

Это можно как-то исправить?

Все это дело в $(document).ready();

4
  • Можете объяснить что это значит $('[data-modal]'), мне просто интересно, это у вас элемент такой?
    – Smash
    14 мая 2013 в 15:10
  • @Maris - это любые элементы с атрибутом [data-modal]. Как правило у меня это <a href="#" data-modal="#modal_id">Открыть окно</a>
    – acidernt
    14 мая 2013 в 15:12
  • Спасибо за notice!
    – Smash
    14 мая 2013 в 15:17
  • просто в в HTML код ваш вставте сразу обработчик onclick="" ... 11 авг 2020 в 18:34

3 ответа 3

11

Я первый раз, когда наткнулся на эту проблему, тоже долго думал, почему не хочет клик обрабатывать. А потом доперло, что событие то было навешано до того, как появились новые элементы!

Тогда еще существовал метод live(), который уже deprecated.

Вместо него теперь метод on(), но конструкция чуть сложнее выглядит. Объясню на примере:

Допустим у нас есть документ со структурой:

<div class='container'>
   <a href='page'>link</a>
</div>

В который мы будем добавлять новые элементы (не важно как мы их добавляем):

$('button').on('click', function() {
    $('.container').append("<a href='page'>link</a>");
});

Собственно остался вопрос: как правильно повесить событие, чтобы и на уже имеющиеся элементы стояло событие, и на новые добавлялось?

Обратимся в документацию по методу on(), и видим такую вещь:

$('.container').on('click', 'a', function(){
...
});

Т.е. что произошло: мы задали во втором параметре тот селектор, на который хотим добавить событие. А в функции $() указываем, где будет происходить "поиск" селектора, который указан во втором параметре.

3
  • Дело проясняется. Спасибо! А как быть тогда с функциями? Вот я окошко то загрузил.. А теперь мне нужно его показать с помощью ф-ии show_modal('#loaded_modal'); Грубо говоря - это тот же fadeIn()
    – acidernt
    14 мая 2013 в 15:28
  • @lampa.. Хотя может я не то спрашиваю. Но первую строку я заменил на это: $('body').on('click', '[data-modal]', function() {... Но вот не работает как то :(
    – acidernt
    14 мая 2013 в 15:32
  • @inferus-vv конструкция добавления события ничем не отличается от вашей: гляньте лучше пример, он должен быть наглядней: jsfiddle.net/S4h2q
    – lampa
    14 мая 2013 в 15:34
3

Кстати, очень короткий пример, как может работать on.

<div id="wrapper">
    <div id="test">Test</div>
</div>

jQuery:

$('#wrapper').on('click','p',function(){

    alert('Ok!');

});

$('#test').append('<p>New Paragraph</p>');

css:

p { cursor: pointer; }
0
// А тут мы уже закрываем модальное окошко при нажатии на определенные кнопки.
$(document).on('click','.modal_close, .modal_close_bg', function() {
    hide_modal();
    return false;
});
3
  • неа, не работает
    – acidernt
    14 мая 2013 в 15:17
  • А, вы просто 1-ее ответили, ну ничего.
    – Smash
    14 мая 2013 в 15:17
  • Должно работать. Можете также попробовать .delegate() api.jquery.com/delegate 14 мая 2013 в 15:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.