0

I'm developing an extension (my first extension) for google Chrome.

I have a problem, if I write html code for button directly in popup.html it works but if I use javascript to create that html/button that button doesn't works. I didn't get any error from my console.

Button appears in html but if I click on it any event is launched.. Code button is the same.

Example

this code: 

<button type="button" id="button1">Connect</button>

If I paste this code directly in popup.html works but if is create with 

    for (i in dataservers.servers) {    
var serverNumberList = "button"+[i];
x +=   "<button type='button' id='"+ serverNumberList +"'>Connect</button>";

document.getElementById("viewServers").innerHTML = x;
}

doesn't works..

Button call:

$("#button1").click(function(){
    window.alert('GO!');
});

First button works the second button doesn't works

In this screenshot you can look that the code is the same. The first one works the second on doesn't works. Some idea?

SOLVED

in my comment I found:

When you write $("#button1") the elements must exist at that time, but they don't in your case AFAICT, so if my guess is right you need to use event delegation. – wOxxOm

I solved with this code: 

$(document).on('click', '#button1', function(evt) {
    window.alert('GO!');     
 });

Thank you guys!

xZero
  • 26
  • 5
  • use `.on` method rather than click – Rohit.007 Jul 21 '19 at 10:11
  • `$("#button111").on( "click", function() { window.alert('GO!'); });` try this – Rohit.007 Jul 21 '19 at 10:12
  • 1
    When you write `$("#button1")` the elements must exist at that time, but they don't in your case AFAICT, so if my guess is right you need to use [event delegation](https://stackoverflow.com/a/12230094). – wOxxOm Jul 21 '19 at 10:27
  • I usually go with this approach for dynamically created clickable elements $(document).on('click', "#some_selector", function(){}); – Albin wärme Jul 21 '19 at 10:27
  • Are there really two buttons with same `id="button1"`? If so that would definitely be the problem – devnull69 Jul 21 '19 at 10:40

2 Answers2

0

let dataserversServers = [0, 1, 2, 3, 4, 5];
let x = '';
for (i in dataserversServers) {
  var serverNumberList = "button" + [i];
  x += "<button class='serverButtons' type='button' id='" + serverNumberList + "'>Connect</button>";

  document.getElementById("viewServers").innerHTML = x;
}

$(".serverButtons").on('click', function() {
  window.alert($(this).attr('id'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="viewServers"></div>

Try this

$("#button111").on( "click", function() { 
    window.alert('GO!'); 
});

and make sure, you are creating buttons with unique Ids. OR use class instead

Rohit.007
  • 3,040
  • 2
  • 17
  • 28
  • Sorry for my bad example, id is unique, I set it just for the screenshot, If I remove html code with id="button111" I get the same problem. Btw thank you for your answer and your time. – xZero Jul 21 '19 at 10:21
  • try that code in browser console and then try to click the button – Rohit.007 Jul 21 '19 at 10:23
  • I tried to use class, but this, didn't solve my problem. – xZero Jul 21 '19 at 10:27
0

This works since the click on the document will value the element being clicked and match it against the selector provided in parameter 2

$(document).on('click', "#button111", function(){
     alert("I was pressed");
});
Albin wärme
  • 241
  • 1
  • 13