Question

目标：
按下按钮文本“ Test2”后显示按钮“ Candy Candy candy”

问题：
它没有显示文字，我缺少哪一部分才能完成文字？

我尝试使用on（）和live（），但仍然无法正常工作。

信息：
*我正在使用jQuery及其ajax

谢谢！

$('#test1').click(function() {
  document.getElementById("data1").innerHTML = "<button id='test2' type='button'>Test 2</button>";
});

$('#test2').click(function() {
  document.getElementById("data2").innerHTML = "Candy candy candy !";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>
  <button id="test1" type="button">Test 1</button>
  <br/>
  <br/>
  <div id="data1"></div>
  <br/>
  <br/>
  <div id="data2"></div>
</body>

</html>

Answer 1

您应该使用事件委托on()，因为该按钮是在第一次单击后自动添加的：

$('#test1').click(function() {
  document.getElementById("data1").innerHTML = "<button id='test2' type='button'>Test 2</button>";
});

$('body').on('click', '#test2', function() {
  document.getElementById("data2").innerHTML = "Candy candy candy !";
});

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
  <button id="test1" type="button">Test 1</button>
  <br/>
  <br/>
  <div id="data1"></div>
  <br/>
  <br/>
  <div id="data2"></div>
</body>
</html>

jQuery无法显示按钮文本

1 个答案: