0

So I've spent all afternoon trying to get this to work and it doesn't seem like it should be this difficult but it is. Long story short I have a dynamically created button that is only generated with the following identifier...

<a class="delete-row" href="javascript:void(0)">Del</a>

It's created in a Javascript program. It works fine. The problem is when the user clicks on this button I want it to fire off a function but because the button is defined within a program I'm having a hard time capturing it. It's a dynamically created button without a unique qualifier. I have tried various OnClick or Click pieces of code...and to no avail. Any clues as to what I might be doing wrong? I am familiar with onclick scenarios and have gotten them to work before. I believe my challenge here is because the button is being created dynamically.

I've tried something like...

$(document).ready(function(){
    $(document).on("click",".delete-row",function()
    {
        console.log("Test"); 
    });
});

And it's not working. Do I need to add an event listener perhaps?

Thanks in advance for any suggestions.

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
Steve Smith
  • 1,019
  • 3
  • 16
  • 38
  • 1
    See the "Direct and delegated event handlers" section of the [`on()` method documentation](https://api.jquery.com/on/). – Sean Jun 29 '21 at 20:52
  • 1
    Also, you should [use a button element](https://css-tricks.com/use-button-element/) instead of a link in this case – Sean Jun 29 '21 at 20:56
  • 2
    Your code, as provided, can [easily be demonstrated](https://jsfiddle.net/dgq1mLt5/1/) to be working fine. So it must be something that you haven't provided here. Check that your doc.ready is running (add an alert as the first line inside the doc ready) - maybe it's not finding your script.js. Double check your class names. Check there isn't *another* event handler already that's stopping propagation. – freedomn-m Jun 29 '21 at 20:58
  • I don't have access to the code or I would change it. – Steve Smith Jun 29 '21 at 20:58
  • jQuery handlers get attached to the DOM elements that exist when it's run (on document ready in your case), not to elements that don't exist yet. You either need to explicitly add the same event handler to newly added elements, or to delegate the event from a parent element that always exists (as in the first comment above.) – Daniel Beck Jun 29 '21 at 21:02
  • @DanielBeck Thanks for the validation. That's kinda where I thought I needed to go. – Steve Smith Jun 29 '21 at 21:05
  • Embarrassingly enough I only just now noticed that you already are delegating the event. (sorry, I'm a little rusty in jquery!). You might try delegating from something other than `document`, a parent element of your `.delete-row` elements might be better – Daniel Beck Jun 30 '21 at 14:08
  • @DanielBeck Thanks I'll try it. I opened up a different issue this am for this topic. I think it's a bit deeper than this. I think it it has to do with how the link is being created? It's not a button as I stated here but a link...and now I can get it to fire once...but that's it...Here's the new issue...https://stackoverflow.com/questions/68196401/how-do-i-get-javascript-or-jquery-to-recognize-my-dynamically-added-link – Steve Smith Jun 30 '21 at 14:11

0 Answers0