2012-03-14 2 views
5

Я довольно новичок в методе on() в jQuery, но пришло время для его использования.Невозможно получить jQuery on() для регистрации динамически добавленного контента

У меня есть две функции для нажатия на определенные кнопки. Каждая функция работает с любыми элементами, первоначально находящимися на странице, но не на любом динамически добавленном контенте (больше из тех же кнопок). Я понимаю, что мне нужно использовать функцию on() после прочтения других ответов здесь и в Google, но у меня все еще есть проблемы. Во всяком случае, код:

jQuery("ul#THEBUTTONS").on({ 
    click: function(event){ 
     event.preventDefault(); 
     console.log("apaz clicked"); 
    } 
}, "a.azaz"); 


jQuery("ul#THEBUTTONS").on({ 
    click: function(event){ 
     event.preventDefault(); 
     console.log("mapaz clicked"); 
    } 
}, "a.mapaz"); 

Любая помощь была бы чрезвычайно оценена, отрывая мои волосы отсюда.

ответ

8

.on() по существу имеет два аромата: один, который действует как .bind(), а другой действует как .delegate().

Для решения этой проблемы вы хотите использовать версию delegate. В качестве эталона, on подписи, как это:

// bind 
$(element-selector).on(event, handler) 

// delegate 
$(container-selector).on(event, element-selector, handler) 

Лучший способ получить до скорости с этим, вероятно, to read up on delegate, что это такое, как его использовали, а затем применить это к on.

+0

Спасибо за ответ. Опять же это (и, следовательно, то, что предложил @ Anthony Grist), служит только для того, чтобы сделать исходные элементы интерактивными. Если это какая-то помощь, я захватываю элемент из какого-то другого с помощью метода .html() и снова вставляю его в другое место. – tristyb

+0

Интересно, если селектор контейнера идет выше, чем содержимое, которое я динамически добавил, так что даже, как и тело, он просто перестает работать. – tristyb

+0

Если вы хватаете только HTML, то обработчики событий, которые вы привязали к этим элементам, не переносятся с ним. Вместо этого вам лучше использовать '$(). Clone (true, true)' или пометить новые элементы внутри контейнера, где вы назначили команду 'delegate'. –

1

Существует два способа использования: .on(), и вы используете неправильный тип.

Вы можете связать обработчик событий непосредственно к элементам с помощью $('selector for elements you want the event handler bound to').on('event', function() {...});

Или, вы можете делегировать события, позвонив по телефону .on() на оберточной элементе, который будет содержать все динамически добавляемые элементы, такие как DIV или, в наихудший случай, элемент <body>. Код будет выглядеть примерно так:

<div id="wrapper"> 
    <a href="#" class="link">Test link</a> 
</div> 

$('#wrapper').on('click', '.link', function(e) { 
    // code to handle the click event on the link here 
}); 

обработчик событий фактически обрабатываемое <div id="wrapper"> элемента после того, как событие ые к нему, но функция вызывается только если первоначальная цель совпадает с селектором при условии. С помощью этого метода вы можете динамически добавлять дополнительные элементы с классом link в div, и функция также будет запускаться при нажатии.

+0

Вопросник регистрирует карту обработчика, а не один обработчик, поэтому 'on (eventMap, selector)' является правильной формой для использования. –

+0

@ FrédéricHamidi Хорошая мысль, по-видимому, я недостаточно внимательно прочитал этот вопрос. –

Смежные вопросы