$(документ.)на("клик"... не работает?

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



у меня есть скрипт, который использует .on () потому что элемент генерируется динамически, и он не работает. Просто чтобы проверить это, Я заменил селектор на обертку динамического элемента, которая является статической, и она все еще не работает! Когда я перешел на обычный старый .нажмите на обертку, хотя это сработало.

(Это просто не будет работать для динамического элемента, очевидно, тот, который имеет значение.)



этот работает:



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

    alert("click");

});


это не так:



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

    alert("click");

});


обновление:



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

692   5  

5 ответов:

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

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

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

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

например:

$(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

110  
2015-04-25 06:02:01

ваш код должен работать, но я знаю, что ответ вам не поможет. Вы можете увидеть рабочий пример здесь (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. Если это так, то при щелчке выключите документ и снова включите (например из окна разработчика обратно в документ) событие будет инициировано. Если это так, вы также заметите, что событие click запускается, если вы нажимаете между двумя разными вкладками (потому что они два разных documents и поэтому вы нажимаете на документ.

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

6  
2013-07-12 03:03:35

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

проблема: мы делаем функцию для работы с указанным элементом 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);
    });
});

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

3  
2017-08-06 07:25:01

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

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

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

2  
2013-07-12 02:50:05

это работает:

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

здесь Скрипка

0  
2013-07-12 02:51:16

Comments

    Ничего не найдено.
Click here to cancel reply.