addClass в div, а затем применить по щелчку к этому новому классу, Jquery

Скрипт: http://jsfiddle.net/8TxmK/

У меня есть два div, один с классом = "bb", а другой без классов. В моем jquery я применяю следующие функции:

$('div').on('click',(function(){

    $(this).addClass('bb');

}));

$('.bb').on('click',(function(){

    alert('bb class clicked')

}));

Итак, я хочу добавить класс «bb» во второй div при нажатии. Это прекрасно работает. Однако вторая часть «bb» при нажатии не работает для div, класс которого «bb» не был загружен с самого начала.

Есть ли обходной путь для этого?

Я пробовал это: http://jsfiddle.net/M8Ja4/ Но функция повторяется каждый раз .


click jquery css addclass toggleclass
person Alvaro    schedule 04.08.2012    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Да.. делегировать. Замените тело ближайшим родителем, который существует при загрузке dom.

$('body').on('click','.bb',function(){

});
person wirey00    schedule 04.08.2012
comment
Еще один вопрос, как мне выбрать этот «.bb» внутри этой функции? Если я использую $(this), он выбирает тело. - person Alvaro; 04.08.2012
comment
Он должен выбрать .bb, вызвавший событие, а не body или родительский jsfiddle.net/8TxmK/7 - person wirey00; 04.08.2012

arrow_upward
2
arrow_downward

У вас есть два варианта. Если вы используете jQuery 1.7+, используйте метод .on() для динамического присоединения обработчика событий:

$(document).on('click','.bb',function() { });

Если вы используете более старую версию jQuery, используйте .delegate():

$(document).delegate('.bb','click',function() { });

Хотя в этих примерах используется document, вы можете использовать любой элемент DOM. Я предлагаю использовать самый низкий из возможных (ближайший предок элементов к .bb), так как таким образом вы сможете быстрее зафиксировать событие и, при необходимости, предотвратить его распространение на уровне документа. Вы можете слышать о методе .live(), но он устарел в версии 1.7, и команда jQuery рекомендует прекратить его использование даже в старых проектах.

Ваш пример, опубликованный в комментариях к другому ответу, является прекрасным примером всплытия событий.

<style>
    div{width:300px;height:100px;background:pink;margin-bottom:10px;}
    .bb{border:10px solid black;}
​</style>

<div></div>
<div class="bb"></div>

<script>
    $(document).ready(function () }{

        $('div').on('click',(function(){
            $(this).addClass('bb');
        }));

        $('body').on('click','.bb',function(){
            alert('bb class clicked');
        });
    ​});
</script>

В этом примере, когда вы нажимаете на div без класса bb, он добавляет класс, затем событие всплывает до body и срабатывает там, поэтому оповещение появляется сначала. нажмите.

person saluce    schedule 04.08.2012
comment
+1 за объяснение всплывающих событий и упоминание об устаревании живых выступлений, ура! - person anotherdave; 04.08.2012