如何使用jquery选择页面加载后生成的元素？

Question

这是我的代码：

$("body").on('click', '#btn', function(e) {
    $('div').after('<span>it is a test</span>');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<div></div>
<button  id="btn">click</button>

现在我想使用color: red;为<span>设置一个CSS属性（例如.css()}。我该如何选择它？

Answer 1

假设您的跨度 ID 名为 spnText

然后，您可以按以下方式添加 css

$("span#spnText").css("attributeName", "attributeValue");

请检查：https://jsfiddle.net/c8vLm9w8/

Answer 2

如果您的网页很简单，只需使用tagName选择器和jquery next()功能即可选择范围，例如：

$("div").next('span').css("color", "red");

如果您可以使用id或class来识别您的代码，例如使用class

，则会更好地添加其他元素

$('div').after('<span class="span1">it is a test</span>'); //Definition
$("div").next('.span1').css("color", "red"); //Selection

代码段

$("body").on('click', '#btn', function(e) {
  $('div').after('<span>it is a test</span>');
  $("div").next('span').css("color", "red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>Div</div><br>
<button  id="btn">click</button>

希望这有帮助。