JQuery события не стрельбы (продвинутый)

Question

Для динамического добавленного элемента через AJAX или любого после загрузки страницы, я знаю, что мы должны использовать .on как

$(document).on('click', '#dynamically-added-element', function() { 
    // do something 
    console.log('Hello World!'); 
}); 

Я даже завернутую шахту с (function($){})(jQuery);, чтобы убедиться, что нет конфликт; и чтобы убедиться, что все должно быть запущено/загружено в правильном порядке, у меня также есть $(document).ready(function(){});.

Теперь, когда событие было первоначально предназначены для запуска на Page A и она работает хорошо, но когда я сделал, и попробовать запустить его на Page B с той же id для основного контейнера и имеют один и тот же ребенок HTML, он не работает.

Так что я сделал несколько экспериментов/тестов и обе работы.

(1) Итак, что я сделал, я написал одного и того же прослушивателя событий через консоль моего браузера только с console.log и щелкнув по целевому элементу, он работает!

(2) В тот же .js сценарий, я добавил таже прослушиватель событий только console.log но завернул в setTimeout(function(){}, 5000);, через 5 секунд, я нажал на целевой элемент и это сработало!

Итак, мой вопрос в том, почему мой исходный код не работает? Почему эти тесты работают? Так в чем же решение?

Кроме того, мои элементы html не загружаются динамически, они загружаются на загрузку страницы, сгенерированы с использованием серверной части PHP.

Редактировать: Эта информация может быть полезна.

• работает в Magento
• скрипт расслоение плотной быть включен head (именно поэтому $(document).ready очень важно).
• jquery script загружается перед моим собственным скриптом.
• Страница A и страница B находятся на разных страницах.
• Это не элемент, созданный ajax, а элемент js/jquery добавлен на лету; она генерируется на постбэка с php кодом

(3) Мой третий эксперимент работает, как хорошо. Но я не хочу, чтобы это было моим решением, если это возможно, и не используя javascript inline onclick. Итак, что я сделал, я добавил целый новый блок сценария внутри файла php, где эта «часть» страницы включена, с точно таким же кодом, и она работает. Но дело в том, что у меня теперь есть два одинаковых прослушивателя событий.

Итак, теперь у меня есть 2 одинаковых прослушивателя событий (независимо от того, что другой не работает - только для страницы B), 1 изнутри (внутренний) и 1 из внешнего файла .js.

<script type="text/javascript"> 
(function($) { 
    $(document).ready(function() { 
     $(document).on('click', '#the-container a', function(e) { 
      e.preventDefault(); 
      var target = $(this).attr('href'); 
     }); 
    }); 
})(jQuery); 
</script> 

Answer 1

Просто напишите вы document.on за пределами document.ready, который должен работать и комментировать ваши "e.preventDefault();". Он работал на скрипке, когда я ее сменил.

<script type="text/javascript"> 
     $(document).on('click', '#the-container a', function(e) { 
      //e.preventDefault(); 
      var target = $(this).attr('href'); 
     }); 
</script> 

Answer 2

JQuery обработчики события привязаны к элементам сам не селектор, если вы инстанцирование обработчика событий селектора элемента до элемента были загружены, не подключая слушатель ни к чему.

Например, это не будет работать:

$.get('http://example.api.com', 
    function(data){ 
     $node = $('<p></p>') 
     $node.text(data) 
     $node.addClass('elementToListen') 
     $('body').append($node) 
    }) 

// this gets executed before the ajax request completes. So no event 
// listener gets attached 

$('.elementToListen').on('click',function(e){'do somthing'}) 

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

В то время как это будет работать:

$.get('http://example.api.com', 
    function(data){ 
     $node = $('<p></p>') 
     $node.text(data) 
     $node.addClass('elementToListen') 
     // here it is getting executed after the AJAX request in the 
     // success callback 
     $node.on('click',function(e){'do somthing'}) 
     $('body').append($node) 
    })