$ (документ) .on (“клацніть” ... не працює?

Чи є тут добре відома помилка?

У мене є сценарій, який використовує .on (), оскільки елемент динамічно генерується, і він не працює. Тільки для того, щоб перевірити це, я замінив селектор на обгортання динамічного елемента, яке є статичним, і він все одно не працював! Коли я перейшов на звичайний старий .click для обгортки, він все ж працював.
(Це просто не буде працювати для динамічного елемента, того, що має значення.)

Це працює:

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

Це не означає:

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

ОНОВЛЕННЯ:

Я клацнув правою кнопкою миші та зробив "Перевірити елемент" у Chrome, щоб просто перевірити щось, а потім після цього подія натискання спрацювала. Я оновився, і це не спрацювало, перевірив елемент, а потім він спрацював. Що це означає?

Ви використовуєте правильний синтаксис для прив’язки до документа для прослуховування події клацання для елемента з 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

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

Jquery:

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

Як хтось уже зазначав, ви використовуєте ідентифікатор замість класу. Якщо на сторінці у вас більше одного елемента з ідентифікатором, тоді jquery поверне лише перший елемент із цим ідентифікатором . Помилок не буде, бо саме так це працює. Якщо проблема полягає в цьому, то ви помітите, що подія натискання працює для першої, test-elementале не для наступної.

Якщо це не точно описує симптоми проблеми, можливо, ваш селектор помиляється. Ваше оновлення змушує мене вважати, що це саме так, оскільки перевіряючи елемент, натискаючи сторінку ще раз і викликаючи клацання. Що може спричинити це, якщо ви встановите прослуховувач подій на фактичний, documentа не на test-element. Якщо так, коли ви клацаєте документ і знову вмикаєте (наприклад, із вікна розробника назад до документа) подія спрацьовує. У цьому випадку ви також помітите, що подія натискання спрацьовує, якщо клацнути між двома різними вкладками (оскільки це дві різні documents, і тому ви натискаєте документ.

Якщо жоден із цих варіантів не є відповіддю, розміщення HTML значною мірою допоможе зрозуміти це.

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

Проблема полягає в тому, що ми створюємо функцію для роботи із зазначеним елементом 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);
    });
});

сподіваюся, це допоможе

Це працює:

<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");
});

Ось Скрипка

Спробуйте це:

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

Документальний спосіб робити це теж дивно. Для мене це мало б сенс, якщо б він використовувався для вибору класу, але у випадку з ідентифікатором у вас, мабуть, просто марний DOM, який там проходить. У випадку селектора ідентифікатора ви отримуєте цей елемент миттєво.

якщо цей код не працює навіть під готовий документ, швидше за все, ви призначили return false;цій кнопці десь у своєму js-файлі, якщо це кнопка, спробуйте змінити його на a, span, anchor або div і перевірте, чи працює.

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