代码之家 › 专栏 › 技术社区 › 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>

推荐文章

Robo Robok · 为什么我无法使用Dom\HTMLDocument搜索标签?

1 年前

Y-jiji · 调整大小时替换了假选择

1 年前

LLScheme · 无法使用Playwright&Pyppeteer找到关键字

1 年前

Konrad Viltersten · 无法修改ViewContainerRef的内部内容,只能在Angular中添加标签

1 年前

Eric G · 如何将svg文本元素垂直居中?

2 年前

Nail Val · 当条件通过时,If语句不显示console.log,并按意外情况继续工作

2 年前

Juan Lanus · 如何获取对所选内容的DOM元素的引用

2 年前

huz3y · addEventListener不适用于从javascript添加的新类所选的元素

2 年前

Toby Hogan · 元素React状态更改后未在DOM中更新

2 年前

user23745914 · 能够访问javascript中的dom元素,而无需显式定义查询选择器

2 年前