代码之家  ›  专栏  ›  技术社区  ›  HelloWorld1

Jquery无法显示按钮文本[复制]

  •  0
  • HelloWorld1  · 技术社区  · 8 年前


    按下按钮文本“Test2”后显示按钮“Candy Candy Candy”

    问题:
    它不显示文本,为了完成它我缺了什么部分?

    信息:
    *我使用的是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>
    1 回复  |  直到 8 年前
        1
  •  1
  •   Zakaria Acharki    8 年前

    你应该使用事件委托 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>