Question

我目前正在开发Chrome扩展程序。我的chrome扩展程序上有一个带有按钮的表格。但不幸的是我的按钮不起作用，控制台中没有错误..

我的问题是为什么我的地址。"copy"中的按钮ID不会触发提醒

这是我在Chrome扩展程序中的home.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  rel="stylesheet">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" ></script>

<script type="text/javascript" src = "address.js"></script>

  </head>
  <body>
    <p><br/><br/></p>
    <div class = "container">
            <table id="example" class = "table table-bordered table-striped table-hover">
                <thead> 
                    <tr>
                  <th>Video Name</th>
                  <th>File Name</th>
                  <th>Copy</th>

                    </tr>

                </thead>

            </table>
    </div>



  </body>
</html>

这是我的地址.js

$.getJSON("http://mlearningessentials.com/vid.php", function(data){

  var items = [];

  $.each(data, function(key, val){
    items.push("<tr>");
    items.push("<td  id=''"+key+"''>"+val.video_name+"</td>");
        items.push("<td id=''"+key+"''>"+val.file_name+"</td>");
          items.push("<td>"+'<button type="button" class="btn btn-primary" id="copy">Copy</button>'+"</td>");



        items.push("</tr>");
 });

  $("<tbody/>", {html: items.join("")}).appendTo("table");

});


 $(document).ready(function(){
    $("#copy").click(function(){
      alert('copied');


    });
  })

Answer 1

您需要触发事件dynamically

$(document).on("click","#copy",function(){
  alert('copied');
});

详细了解event delegation，了解其运作方式。

Answer 2

对于动态添加的元素，您对点击的绑定略有不同（事件委托）。试试这个：

$(document).on("click", "#copy", function() {
  alert('copied');
});

Answer 3

通过动态DOM试试这个

$(document).on("click", "#copy", function() {
  alert('copy');

});

我的按钮不能使用jquery工作

3 个答案: