Why my Chrome extension event doesn't work?

Question

I'm trying to create a chrome extension. I had a problem with the affectation of event for the new element that i append to the dom of site with content. Js

If I add an event to an element' 'for example class' exist already in the page, it works correctly. Just for my new appended element((in the code iadded a button ,the event is just an alert to test))

function tst() {
  myclass = $("._3hg-._42ft");
  myclass = myclass.not(".supp");
  myclass.addClass("supp");
  var patt = /https:\/\/(.)*\.facebook\.com\/(.)*\/(posts|photos|videos)\/(\w|\.|\d)*/g;
  for (i = 0; i < myclass.length; i++) {
    result = patt.exec(myclass[i]);
    myclass.append('<button class="fact" id=' + result[0] + ' style="position: absolute;">fact</button>');
  };

  /* this is a simple event*/
  /***********************/
  $(".fact").on('click', function() {
    alert("no event work ");
  });

Please edit your question with your code, we cannot help with what we cannot see here. https://stackoverflow.com/help/mcve — Mark Schultheiss, Apr 19 '19 at 13:06
`result[0]` is the entire URL which contains various special symbols, so you need to add quotes, for example `id="' + result[0] + '" style=` — wOxxOm, Apr 19 '19 at 15:52
Is there a reason you create/use global variables in the function? — Mark Schultheiss, Apr 19 '19 at 15:59
With the code added I have voted to re-open. Please revise the code to fix syntax issues (example function is not closed/complete, should we assume therein? IS this a chrome extension or just code on a page? — Mark Schultheiss, Apr 19 '19 at 16:01

score 0 · Accepted Answer · answered Apr 19 '19 at 16:16

Making somewhat broad assumption here in my answer that it is JavaScript/jQuery related and is NOT an extension...or is so still in that context. You need to attach the event to the container here perhaps for the dynamically created elements. Lots of global stuff, suggested to not do that, updated there.

Appends a lot of buttons perhaps? might need to only hit DOM once but left as-is in this isolated function.

function tst() {
  let myclass = $("._3hg-._42ft")
    .not(".supp");
  myclass.addClass("supp");
  //let result = {};
  var patt = /https:\/\/(.)*\.facebook\.com\/(.)*\/(posts|photos|videos)\/(\w|\.|\d)*/g;
  var i = 0; //avoid global
  for (i; i < myclass.length; i++) {
    // broad assumption of the returned value from patt.exec() here
    // not even sure why it needs an id, have a class, use for css
    let result = patt.exec(myclass[i]);
    myclass.append('<button class="fact" id="' + result[0] + '">fact</button>');
  }

  /* attache event to pre-existing element */
  /***********************/
  myclass.on('click', ".fact", function() {
    alert("event works");
  });
}

button.fact {
  position: absolute;
}

Why my Chrome extension event doesn't work?

1 Answers1