Question

我有一个带有空id属性的按钮。我想通过其动态添加的ID获得<a>。

注意：我不想使用createElement()添加<a>。

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>

JS

$(document).ready(function() {

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

});

这是我在jsFiddle上的代码

Answer 1

由于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>

Answer 2

好的：

 $(document).ready(function() {

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

Answer 3

$(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>

将id动态添加到元素后，如何通过id获取元素？

3 个答案: