jQuery函数在JS innerHTML属性之后无法正常工作

时间:2013-10-07 11:47:56

标签: javascript jquery innerhtml craftyjs

我在我的应用程序中使用此代码:

document.getElementById("inventory_box").innerHTML = "<img src='./img/rock.gif' id='test' />";

#inventory_box元素已经存在,因此它只会将IMG吐出到#inventory_box

我想要的是能够点击ID为IMG的{​​{1}}, 但不会像:

test

5 个答案:

答案 0 :(得分:3)

试试这个,

$(document).on('click',"#test",function() {
    alert('test');
});

阅读on()

答案 1 :(得分:1)

由于图像是动态添加的,因此您需要使用event delegation来注册事件处理程序

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#inventory_box').on('click', '#test', function() {
      // Run this
});

这会将您的活动附加到test元素中的#inventory_box图片元素, 减少必须检查整个document元素树并提高效率的范围。

答案 2 :(得分:1)

考虑使用'append'而不是innerHTML。使用混合的vanilla JavaScript&amp; jQuery似乎在使用新元素更新DOM时会造成一些延迟。 下面的代码对我有用。

$("#inventory_box").append("<img src='./img/rock.gif' id='test' />")

$('#test').click(function(d){console.log("clicked!");});

答案 3 :(得分:0)

事件处理程序的赋值在有一个具有此类id的元素之前运行,因此在创建元素之后,它将不会为其分配任何事件处理程序。

正如建议的那样,解决这个常见的javascript错误的最简单方法是,您可以将事件分配给容器DOM元素,并使用jquery的事件委托来触发事件新添加的DOM元素。

但我宁愿不使用这种方法,我不能给你的原因,比方说,我只是不愿意。

始终在创建元素后分配事件。例如:

document.getElementById("inventory_box").innerHTML = "<img src='./img/rock.gif' id='test' />";
在此之后

执行此操作:

$("#test").click(function() {
                // Run this
            });

答案 4 :(得分:0)

$('#inventory_box img').click(function() {
      // Run this
});