jquery on click не запускается, когда я напрямую обращаюсь к нему по ID

Question

Я использую dust.js (после долгих поисковых запросов из-за отсутствия хорошей документации). Наконец, я смог создать гиперссылку динамически. Теперь я хочу предоставить функциональность onclick для динамически созданной гиперссылки.

function createLink(){ 

    // register the template loading method with dust now 
    var compiled = dust.compile("Hello <a href='#' id='linked'>{name}</a>!", "intro"); 
    dust.loadSource(compiled); 

    dust.render("intro", {name: "Fred"}, function(err, out) { 
     console.log(out); 
     $("#displayHelloSection").html(out); 
    }); 

} 

Ниже мой документ готов. Как ни странно, когда я нажимаю на созданную гиперссылку, я получаю Apple, но не Orange. Мне любопытно узнать, почему второй onclick не работал? Разница в том, что в первом я использую документ для ссылки на мой id ('#linked'). Во втором я напрямую обращаюсь к id.

$(document).ready(function() { 


    $(document).on('click','#linked',function(e){ 

    alert("Apple"); 

    }); 

    $('#linked').on('click', function() { 

     alert('Orange'); 

    }); 

}); 

Answer 1

обработчики событий, указанные как это:

$('#linked').on('click', function() { 

пытаются прикрепляются к "#linked" объекта в то время этот код выполняется. Если объект отсутствует во время выполнения этой строки кода, то никакой обработчик событий не создается.

обработчики событий, как это:

$(document).on('click','#linked',function(e){ 

делегированы обработчики событий. Обработчик событий прикреплен к элементу document, который всегда существует, поэтому его можно подключить в любое время. Затем он полагается на распространение событий для событий, которые фактически возникают на других элементах, чтобы пузыриться до элемента document, и когда обработчик события видит это событие, он смотрит, какой элемент он инициировал, чтобы увидеть, соответствует ли это "#linked". Это позволяет контенту "#linked" приходить и уходить или создаваться позже, не затрагивая обработчик событий.

---

Таким образом, при работе с динамически вставленным содержимым, который вы хотите обработчик событий, у вас есть пара вариантов:

1. Вы можете вставить содержимое в DOM, а затем крепят обработчик события.
2. Вы можете использовать делегированную обработку событий, где вы прикрепляете обработчик событий к статическому родительскому объекту и используете делегированную форму .on(), чтобы указать дочерний селектор, который вы хотите динамически искать.

Вы можете прочитать эти другие сообщения на эту тему для получения дополнительной информации о делегировании обработки событий:

jQuery .live() vs .on() method for adding a click event after loading dynamic html

Does jQuery.on() work for elements that are added after the event handler is created?

JQuery Event Handlers - What's the "Best" method

Why not take Javascript event delegation to the extreme?