My button wont work using jquery

Question

I'm currently developing a chrome extension. and my chrome extension has a table with buttons on it. But unfortunately the my buttons won't work and there's no errors in the console..

My question is why my button id in my address.js "copy" wont triggered an alert

This is my home.html in my chrome extension

<!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>

And this is my address.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');


    });
  })

Learn [Event Delegation](http://learn.jquery.com/events/event-delegation/) use code `$(document).on("click","#copy",function(){` — Satpal, Jan 05 '17 at 09:59

Mihai Alexandru-Ionut · Accepted Answer · 2017-01-10T06:33:59.410

2

You need to trigger event dynamically

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

Read more about event delegation to understand how it works.

edited Jan 10 '17 at 06:33

answered Jan 05 '17 at 10:00

Mihai Alexandru-Ionut

47,092
13
101
128

Thank you sir its working now. and I will read that docu :) – VLR Jan 05 '17 at 10:13

score 1 · Answer 2 · edited Jan 05 '17 at 10:27

1

For dynamically added elements you have bind the click a bit differently(Event delegation). Try this:

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

edited Jan 05 '17 at 10:27

Sudharsan S

15,336
3
31
49

answered Jan 05 '17 at 09:59

Ionut Necula

11,107
4
45
69

score 1 · Answer 3 · edited Jan 05 '17 at 14:39

1

By dynamic DOM try this

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

});

edited Jan 05 '17 at 14:39

Blue

22,608
7
62
92

answered Jan 05 '17 at 10:01

ricky

1,644
1
13
25

My button wont work using jquery

3 Answers3