代码之家 › 专栏 › 技术社区 › Bahman Parsa Manesh

如何在ID动态添加到元素后按ID获取元素?[副本]

dom jquery javascript

Bahman Parsa Manesh · 技术社区 · 8 年前

这个问题已经有了答案:

Event binding on dynamically created elements? 23个答案

我有一个空按钮 id 属性。我想得到 <a> 按动态添加到其中的ID。

注意:我不想使用 createElement() 添加 <A & GT; .

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <a id="" class="btn" href="#"><button>Green</button></a><br><br>
  <a id="changeId" href="#"><button>Change Id!</button></a>
</body>
</html>

$(document).ready(function() {

  $("a#green").on("click", function(){
    $("body").css("background-color","green");
  });
  $("a#changeId").on("click", function(){
    $("a.btn").attr("id","green");
  });

});

这是我的密码 jsFiddle

3 回复 | 直到 8 年前

Mamun 8 年前

自从 id 正在通过另一个事件创建,您可以使用事件委托方法:

$("body").on("click","a#green", function(){

$(document).ready(function() {

  $("body").on("click","a#green", function(){
    $("body").css("background-color","green");
  });
  $("a#changeId").on("click", function(){
    $("a.btn").attr("id","green");
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <a id="" class="btn" href="#"><button>Green</button></a><br><br>
  <a id="changeId" href="#"><button>Change Id!</button></a>
</body>

Nico Zimmer 8 年前

可以:

 $(document).ready(function() {

      $("a#changeId").on("click", function(){
        $("a.btn").attr("id","green");
        $("a#green").on("click", function(){
            $("body").css("background-color","green");
      });
      });
    });

Kiran Shahi Jonny 8 年前

$(document).on("click", '#green', function(){}); 是你需要的。因为 $("a#green") 找不到,因为它是动态添加到DOM中的。或者你可以做一些像 $('body').on("click", '#green', function(){}); 也就是说,您需要参考静态元素。它可以是的任何父元素 #green 这是静态的。

$(document).ready(function() {
	$(document).on("click", '#green', function(){
  	$("body").css("background-color","green");
  });
  $("a#changeId").on("click", function(){
  	$("a.btn").attr("id","green");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="" class="btn" href="#"><button>Green</button></a><br><br>
  <a id="changeId" href="#"><button>Change Id!</button></a>