Преобразование .live () в .on () с помощью сложного селектора

Question

Преобразование .live () в .on () с помощью сложного селектора

0

Как это можно преобразовать из.live() в.on()?

$('[id^=generic1_id_]', '[id^=generic2_id_]').live('click', function(){

Чтобы преобразовать в.on(), я мог бы создать два рабочих примера, описанных ниже, но потом мне нужно повторно использовать код в обоих, тогда как с примером.live() я могу ссылаться на оба селектора, и код будет выполняется в событии клика для любого селектора. Кроме того, я использую.live(), потому что обработчик кликов должен применяться к новым элементам, добавленным/созданным после загрузки DOM. Я знаю, что примеры.on() ниже будут работать для существующих и новых элементов, но я должен их отделить, потому что я не могу понять, как написать код, где он будет применяться к обоим селекторам при использовании синтаксиса.on().

// Generic Example - Click handler for elements with an IDs beginning with "generic1_id_"
$(document).on('click', '[id^=generic1_id_]', function(){

}

А ТАКЖЕ

// Generic Example - Click handler for elements with an IDs beginning with "generic2_id_"
$(document).on('click', '[id^=generic2_id_]', function(){

}

Я пробовал это, но это неверно, потому что '[id ^ = generic2_id_]' будет интерпретироваться как данные не как 2-й селектор.

 // Won't work
 $(document).on('click', '[id^=generic1_id_]', '[id^=generic2_id_]', function(){

Неожиданно мало что можно найти в поисках, чтобы найти что-либо помимо простых примеров преобразования.live() в.on(). Есть идеи?

12AX7 21 март 2014, в 21:18

Источник

Теги:

jquery

2 ответа

2

Правильное преобразование:

$(document).on('click', '[id^=generic2_id_] [id^=generic1_id_]', function(){

потому что с вашим оригиналом вы использовали запятую между двумя разными селекторами, указав как селектор, так и контекст. .live всегда привязан к документу, затем он использовал селектор и контекст для фильтрации событий, которые доходят до документа только до тех, которые соответствуют селектору и являются потомками элемента, соответствующего контексту.

~~Это звучит, как будто ваш исходный код фактически не делает то, что вы думаете.~~

$('[id^=generic1_id_]', '[id^=generic2_id_]').live('click', function(){

Ваш исходный код привяжет событие клика ко всем элементам, которые соответствуют [id^=generic1_id_] и фильтрует события только для событий, поднятых элементами, которые соответствуют [id^=generic2_id_]

Kevin B 21 март 2014, в 18:33

0

Новый код также не будет применяться к вновь созданным элементам, которые соответствуют [id^=generic1_id_] или [id^=generic2_id_] ; для этого селектор (после '$' ) должен быть контейнером, содержащим эти элементы.
yitwail 21 март 2014, в 19:46
0

Это будет для элементов [id^=generic1_id_] но не для элементов [id^=generic2_id_] , как в исходном коде.
Kevin B 21 март 2014, в 19:49
0

Хм ... на самом деле ... кажется, что оригинал работал в обоих случаях. Я всегда думал, что он учитывает контекст, но он, кажется, всегда привязывается к документу независимо от контекста (хотя он учитывает контекст, измените его на #foo, и он перестанет работать). jsfiddle.net/RB94h
Kevin B 21 март 2014, в 19:56
0

Хм, действительно. Это было проще, когда live() был единственным выбором или даже delegate() вместо live() . Чтобы охватить все базы, вместо $(document).on() () будет работать $ ( some-selector ) .on (), если some-selector содержит элементы, которые должны быть сопоставлены
yitwail 21 март 2014, в 20:50
0

Спасибо Кевину Б. за ответ. Ваш ответ был очень близок, но ему нужно было два селектора, разделенных запятой: $ (document) .on ('click', '[id ^ = generic1_id _], [id ^ = generic2_id_]', function () {
12AX7 21 март 2014, в 20:55
0

Моя проблема в том, что это не то, что сделал ваш оригинальный код.
Kevin B 21 март 2014, в 22:34

Показать ещё 4 комментария

Ещё вопросы

Новый код также не будет применяться к вновь созданным элементам, которые соответствуют [id^=generic1_id_] или [id^=generic2_id_] ; для этого селектор (после '$' ) должен быть контейнером, содержащим эти элементы.
Это будет для элементов [id^=generic1_id_] но не для элементов [id^=generic2_id_] , как в исходном коде.
Хм ... на самом деле ... кажется, что оригинал работал в обоих случаях. Я всегда думал, что он учитывает контекст, но он, кажется, всегда привязывается к документу независимо от контекста (хотя он учитывает контекст, измените его на #foo, и он перестанет работать). jsfiddle.net/RB94h
Хм, действительно. Это было проще, когда live() был единственным выбором или даже delegate() вместо live() . Чтобы охватить все базы, вместо $(document).on() () будет работать $ ( some-selector ) .on (), если some-selector содержит элементы, которые должны быть сопоставлены
Спасибо Кевину Б. за ответ. Ваш ответ был очень близок, но ему нужно было два селектора, разделенных запятой: $ (document) .on ('click', '[id ^ = generic1_id _], [id ^ = generic2_id_]', function () {
Моя проблема в том, что это не то, что сделал ваш оригинальный код.

Unknown · Accepted Answer · 2014-03-21T17-05-00.000Z

Попробуй это:

$(document).on('click', '[id^=generic1_id_],[id^=generic2_id_]', function(){ 
//your code goes here
});