Jquery script not running in html-files included by angular

Question

I have this very simple jquery script:

$(document).ready(function() {

    $("h2").click(function(){
        alert("Hello world");
    })    
});

When I click on any h2 on the entire site, an alert will show up.

This works fine when I put an h2 anywhere in my index.html but when I put the h2 in some of the files included by angular, nothing happens when I click on the h2.

These are my files

index.htm
included.htm
myjqueryfunctions.js

Here is how I include the jquery-file

<body>
.... some code ....
<script src="jquery_functions.js"></script>
</body>

Here is how I include the HTML-file using angular

<div ng-include src=" 'included.htm' "></div>

Everything else is working fine.

Question: Why does my jquery-script work fine when I put the h2 in my index.html but not when it is in the included.html

CodeIsLife · Accepted Answer · 2016-02-18 15:07:13Z

1

Hi you should call selector as below

 // This WILL work because we are listening on the 'document', 
    // for a click on an element with an tag h2
    $(document).on('click',"h2", function(){
            alert("Hello world");
        })  

    // This will NOT work because there is no 'h2' (added later or injected by angular)... yet
    $("h2").on("click",function() {
        alert("hello");
    });

edited Feb 18, 2016 at 15:07

answered Feb 18, 2016 at 15:00

CodeIsLife

1,2658 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ilias Bennani Over a year ago

CodeIsLife: Your answer did my day. It works perfect now! I salute you!! Thanks a lot!

Collectives™ on Stack Overflow

Jquery script not running in html-files included by angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related