0

So I have this problem, where on button click it loads a file inside a div. The file contains some text and <button id="loaded_button">TRIGGER EVENT</button> at the end. I have to make a hover for that button with an alert, however I'm doing it wrong somehow. Here's a snippet of my index file with the first button:

<button class="btn" id="btn" testattribute="5">button</button>
<div id="text_container">FILE SHOULD BE LOADED HERE</div>

And here's my js:

let url = "files/content.html";
$("#btn").click(function() {
    $("#text_container").load(url);
});

$("#loaded_button").hover(function() {
    alert("123");
});

When I press the "btn" button, the file loads as it should, but the hover button is not working for some reason. I guess it has to do with it being loaded after the js file is loaded, I'm not really sure how to fix that though. Could you please tell me what I'm doing wrong and how to do it? Thanks in advance!

k.gerilovski
  • 35
  • 10

1 Answers1

0

When your JS runs, the button doesn't exist on the page so it can't be bound. You'll have to delegate the event: https://learn.jquery.com/events/event-delegation/

$('#text_container').on('mouseenter', '#loaded_button', function() {
    alert("123");
});
webdevdani
  • 1,062
  • 7
  • 11