Selector работает только после проверки/выбора элемента

У меня есть этот код здесь:Selector работает только после проверки/выбора элемента

$(document).ready(function() { 
    debugger; 
    $("div[id^='stage_']").click(function (e) { alert('Hello'); }); 
});

Странная вещь, которую я не могу объяснить это, что, когда я исполняю селектор, когда я нахожусь в консоли при достижении debugger, он возвращает пустой массив, []

Но когда я выхожу и перехожу на страницу, а затем нажмите Ctrl-Shift-C в Chrome, чтобы начать проверку и нажмите на некоторые из div, которые имеют идентификатор I ' m, ищите, затем выполните селектор снова в консоли, теперь у меня есть элементы, которые я ожидаю.

Я даже попробовал это здесь, чтобы проверить, был ли это асинхронный. проблема загрузки (это система, над которой у меня нет всего элемента управления). но все же, при достижении отладчика селектор не работает - даже после ожидания 10 секунд (что тогда я уверен, что у него есть div). Я все еще должен идти в инспектор, поэтому jQuery распознает элементы.

$(document).ready(function() { 
    //debugger; 
    setTimeout(function() { 
     debugger; 
     $("div[id^='stage_']").click(function (e) { alert('allo'); }); 
    }, 10000); 
});

Почему jQuery должен знать только элементы, которые я нажал на инспектора Chrome?

источник

2016-07-13 Francis Ducharme

Является ли это/этот элемент (ов) добавлен в DOM после любого асинхронного вызова Ajax (например)? Если это так, [делегировать событие click] (https://learn.jquery.com/events/event-delegation/) в любой статический контейнер –

@ A.Wolff На самом деле, это из системы, в которой у меня нет полного контроля над , Если это так, как я могу сказать jQuery только выполнить мой код, когда все будет загружено? Я думал, что '.ready' выполнит эту работу. –

Нет, jq ready pseudo event - это когда DOM готов, HTML разобран. Это отличается от события загрузки окна. Поэтому сначала попробуйте использовать в качестве оболочки '$ (window) .on ('load', function() {...});'. Если все еще не работает, просто делегируйте его с помощью '$ (document) .on ('click'," div [id^= 'stage_'] ", function (e) {alert ('Hello');});' (no потребности любой оболочки события, если событие делегировано уровню документа). Если делегирование не работает, то что-то еще прекратит распространение события нажатия. Другой возможностью было бы захватить событие click (jq не поддерживает его) и фильтровать цель события внутри обработчика кликов –

Использование «on» работает, даже если элемент существует после загрузки страницы.

$(document).ready(function(){ 
 
    //$("div[id^='stage_']").click(function (e) { alert('Hello'); }); 
 
    $("body").on('click','div[id^="stage_"]', function (e) { alert('Hello'); }); 
 
    $('body').html('<div id="stage_1">teste1</div>' + 
 
        '<div id="stage_2">teste2</div>' + 
 
        '<div>blabla</div>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

документ: http://api.jquery.com/on/

источник

2016-07-13 18:59:49

Selector работает только после проверки/выбора элемента

ответ

Смежные вопросы