Как заставить функции jquery работать с динамически меняющимися элементами

Question

сначала позвольте мне сказать, что я видел this post.

, который говорит (как и api.jquery.com), что .live() и .on() позволяют назначать событие jquery, которое применяется даже к будущим элементам. Однако мой следующий JQuery:

$("#playerImg").on("mouseenter",function() { 
     console.log("works");}); 

работает на старте, но после того, как я запускаю этот код:

function move(moveTo) { 
    document.getElementById(player.currentLocation).innerHTML = ""; 
     player.currentLocation = moveTo; 
    document.getElementById(player.currentLocation).innerHTML += player.displayText; 
} 

здесь соответствующие переменные

var player = { 
    "displayText" : "<img src = 'http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png'" + 
     id='playerImg' "class='onTop' alt='you' border='0' />", 

    "currentLocation": 0 //(i use a 5 * 5 table with id's 0-24) 
} 

выше код оленья кожа бежать. как я могу сделать событие в jquery, которое может работать на элементах, которые еще не существуют?

link here

Answer 1

Использование .on() как вы применять прямые события, которые быстрее, но НЕ относятся к динамическим элементам.

Вы должны использовать .on() подобные для динамических элементов:

$(document).on("mouseenter", '#playerImg',function() { 
    console.log("works"); 
}); 

document должен быть ближе статическим элементом для увеличения производительности.

Боковое примечание, id 's должно быть уникальным, изменить его для class. Вышеприведенный код может не работать, потому что он использует идентификатор. Если это так, и вы не хотите изменить какой-либо причине, используйте:

$(document).on("mouseenter", 'img#playerImg',function() { 
    console.log("works"); 
});