如何使jquery函数与动态变化的元素一起工作

Question

首先让我说我看过这篇文章.

它表示(和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中创建一个事件,它可以在不存在的元素上运行？

链接在这里

Answer 1

使用.on()像你这样直接申请的事件,这是速度更快,但DOES NOT适用于动态元素.

你需要.on()像动态元素一样使用它:

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

document 应该是性能增益最接近的静态元素.

旁注,id必须是唯一的,改变它class.上面的代码可能不起作用,因为它使用id.如果是这种情况,并且您不想因任何原因进行更改,请使用以下命令:

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