$ (document).on("click"... не работает?

Есть ли известная ошибка, которую я могу сделать здесь?

У меня есть script, который использует .on(), потому что элемент динамически генерируется, и он не работает. Чтобы проверить это, я заменил селектор динамическим обтеканием элементов, который является статическим, и он все еще не работает! Когда я переключился на простой старый .click для обертки, он работал. (Это просто не работает для динамического элемента, очевидно, тот, который имеет значение.)

Это работает:

$("#test-element").click(function() {
    alert("click");
});

Это не:

$(document).on("click","#test-element",function() {
    alert("click");
});

UPDATE:

Я щелкнул правой кнопкой мыши и сделал "Inspect Element" в Chrome, чтобы просто дважды проверить что-то, а затем после этого щелкнуло событие. Я обновился и не работал, проверял элемент, а затем он работал. Что это значит?

Ответ 1

Вы используете правильный синтаксис для привязки к документу для прослушивания события щелчка для элемента с id = "test-element".

Вероятно, он не работает из-за одного из:

Не использовать последнюю версию jQuery
Не заверяйте свой код внутри готового документа DOM
или вы делаете что-то, что заставляет событие не пузыриться до слушателя в документе.

Чтобы захватить события на элементах, которые создаются ПОСЛЕ объявления ваших прослушивателей событий, вы должны привязать к родительскому элементу или элементу выше в иерархии.

Например:

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

В этом примере будет срабатывать только предупреждение "привязано к документу".

JSFiddle с jQuery 1.9.1

Ответ 2

Ваш код должен работать, но я знаю, что ответ вам не поможет. Вы можете увидеть рабочий пример здесь (jsfiddle).

Jquery:

$(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

Как уже указывалось, вы используете идентификатор вместо класса. Если у вас есть еще один элемент на странице с идентификатором, тогда jquery вернет только первый элемент с этим идентификатором. Ошибок не будет, потому что это работает. Если это проблема, вы заметите, что событие click работает для первого test-element, но не для последующих.

Если это не точно описывает симптомы проблемы, возможно, ваш селектор ошибочен. Ваше обновление заставляет меня поверить, что это происходит из-за проверки элемента, а затем снова щелкая страницу и запуская щелчок. Что может быть причиной этого, если вы помещаете прослушиватель событий в фактический document вместо test-element. Если это так, при нажатии на документ и обратно (например, из окна разработчика обратно в документ) событие будет запускаться. Если это так, вы также заметите, что событие щелчка запускается, если вы нажмете между двумя разными вкладками (потому что они два разных document и, следовательно, вы щелкните документ.

Если ни один из них не является ответом, публикация HTML будет иметь большое значение для выяснения этого.

Ответ 3

Старый пост, но я люблю делиться, поскольку у меня есть тот же случай, но я, наконец, знал проблему:

Проблема заключается в следующем: мы создаем функцию для работы с указанным элементом HTML, но элемент HTML, связанный с этой функцией, еще не создан (поскольку элемент был динамически сгенерирован). Чтобы это сработало, мы должны создать функцию в то же время, когда мы создадим элемент. Элемент сначала, чем связать с ним функцию.

Просто слово, функция будет работать только с элементом, созданным перед ним. Любые элементы, созданные динамически, означают после него.

Но, пожалуйста, проверьте этот образец, который не учитывал вышеуказанный случай:

<div class="btn-list" id="selected-country"></div>

Динамически добавлено:

<button class="btn-map" data-country="'+country+'">'+ country+' </button>

Эта функция работает хорошо, нажав кнопку:

$(document).ready(function() {    
        $('#selected-country').on('click','.btn-map', function(){ 
        var datacountry = $(this).data('country'); console.log(datacountry);
    });
})

или вы можете использовать тело:

$('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

сравните с этим, что не работает:

$(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

надеюсь, что это поможет

Ответ 4

Попробуйте следующее:

$("#test-element").on("click" ,function() {
    alert("click");
});

Документирующий способ сделать это тоже странно. Это имело бы смысл для меня, если бы оно использовалось для селектора классов, но в случае с идентификатором вы, вероятно, просто имеете бесполезную DOM, проходящую там. В случае селектора id вы мгновенно получаете этот элемент.

Ответ 5

Это работает:

<div id="start-element">Click Me</div>

$(document).on("click","#test-element",function() {
    alert("click");
});

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

Вот Fiddle