.on ('mouseenter' ... не обнаруживает добавленный элемент (jQuery)

Question

Приведенный ниже код не привязывает событие к добавленному элементу (используется .insertBefore()).

Насколько я понимаю, .on() должен работать как .live(). Разве это не так?

<div class="todoColumn">
    <div class="projectHeader">
        <div class="title">Example</div>Subtitle
    </div>

    <div class="todo">
        <div class="checkbox"><span class="check pictos">3</span></div>

        <div class="text">another test</div>

        <div class="floatfix"></div>
    </div>

    <div class="todo">
        <div class="checkbox"><span class="check pictos">3</span></div>

        <div class="text">another test</div>

        <div class="floatfix"></div>
    </div>
</div>

---

    $('.todoColumn .todo .checkbox').on('mouseenter', function() {
        $(this).find('.check').css('visibility','visible');
    });

Answer 1

Зависит от того, куда вы положили селектор. Помещение в первый объект jQuery не имеет поведения .live(). Он связывает статические обработчики событий.

Указание родительского объекта комментария в объекте jQuery и установка селектора в аргументах на .on() дает вам поведение в реальном времени:

$(document.body).on('mouseenter', '.todoColumn .todo .checkbox', function() {
    $(this).find('.check').css('visibility','visible');
});

Это будет работать даже более эффективно (и лучше, чем .live()), если вы выберете общего родителя, который ближе к фактическим объектам, чем document.body. Проблема с .live() заключалась в том, что в объекте документа было слишком много обработчиков событий (все с селекторами для проверки). .on () работает больше как .delegate() и позволяет вам поместить обработчик событий на общего родителя, который ближе к фактическим объектам.

РЕДАКТИРОВАТЬ: Теперь, когда вы включили ваш HTML, более эффективный код был бы с общим родительским селектором в объекте jQuery и самым простым из возможных аргументов в аргументах .on():

$('.todoColumn').on('mouseenter', '.checkbox', function() {
    $(this).find('.check').css('visibility','visible');
});

Answer 2

Чтобы использовать его так, как вы хотите, вам нужно поместить селектор в функцию и привязать событие к документу:

$(document).on("mouseenter", ".column .todo .checkbox", function(){
    // do stuff
});

И, как предложил jfriend00, более эффективно привязать событие к ближайшему родителю:

$(".column .todo").on("mouseenter", ".checkbox", function(){
    // do stuff
});