jQuery访问附加的HTML

Question

我要在单击按钮时将从ajax调用返回的HTML部分附加到代码中的div元素中。

然后，我想通过jQuery访问那些id / class选择器。

例如....

基本HTML

<div id="codeToGoHere"></div>

First Button OnClick事件调用ajax事件：

ajaxReturns - "<div id='thisDiv'>blah blah</div><div id='thatDiv'>blah blah</div>"
$("#codeToGoHere").append(ajaxReturns);

第二个按钮的OnClick事件：

$("#thisDiv").css("border", "1px solid red");

这是行不通的，我想是因为加载DOM时附加的代码不可用。 有没有一种方法可以让DOM在更改后得到重新评估，以确保我可以绑定到出现的新元素？

或者...可能是一个更好的问题，是“我该如何进行这项工作？”！

谢谢 ：-）

Answer 1

正如您已经怀疑的那样，加载页面时稍后会添加div，而不是将其添加到DOM中，因此您必须使用事件委托附加click-event：

$(document).on("click", "#thisDiv", function(){
    $(this).css("border", "1px solid red");
});

由于您的问题中没有按钮，因此我仅以附加div上的click-Event设置为例，假设您还附加了一个按钮。
代替$(document)任何静态父元素都可以用作容器元素来委托事件。

因为应该避免在Stackoverflow上复制/粘贴（甚至从自己的答案中复制/粘贴）-我已经在这里回答了类似的问题，并提供了一些有关事件委托的更多信息和jquery参考。

Answer 2

附加html ，您需要将事件绑定到新添加的html。 然后它将起作用。 要绑定，您可以使用它。

$("#thisDiv").click(function() { css("border", "1px solid red"); });

您需要在下一行之后放置此功能。

$("#codeToGoHere").append(ajaxReturns);