Проблемы с .on в решении приложенных узлами

Question

У меня есть этот кусок кода, который отслеживает клики на <div class="selectable_item">

$(function(){ 
    $("#matchres .selectable_item").on("click", function(){ 
    console.log('Sending request') 
    $.post("/request", $.param({'crit_id': this.id}), function(){}).fail(function(){console.log("matchres error...");}); 
    return true;}); 
}); 

Что я заметил это, когда я использую хром консоль, например, чтобы увидеть, если есть любые $("#matchres .selectable_item"); он находит их, и если я определяю в консоли $("#matchres .selectable_item").on("click", function(){console.log('hi')});, действие будет таким, как ожидалось, и консоль будет вести журнал правильно. Но то, что я показал вам выше, не работает. Любые идеи, почему это так? Любая помощь будет очень высоко ценится. Как добавленная информация, я использую jquery v1.10.2.

Answer 1

@ идея Hanlet является правильным, в то время документа загрузки этих элементов не существует, потому что вы» динамически создавая их, и они существуют к тому моменту, когда вы взаимодействуете с ними в консоли разработчика. То, что вы хотите сделать, - связать обработчик события с делегатом или объектом, который будет прослушивать события дочерних элементов.

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

Например, если вы создаете .selectable_item динамически, но не #matchres, затем добавьте это:

$('#matchres').on('click', '.selectable_item', function() { ... }); 

Answer 2

Поскольку вы добавляете их динамически, это может быть проблема делегирования событий, очень распространенная. Попробуйте вместо этого:

$(document).on("click", "#matchres .selectable_item", function(){ ... } 

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

Посмотрите на этих двух примерах:

http://jsfiddle.net/hescano/aKfWf/

и

http://jsfiddle.net/hescano/aKfWf/1/