-1

I am trying to run a JavaScript code after Angular template generated, but I find the JavaScript codes don't run on dynamic generated views. For example, in this code div2 is generated by clicking on div1 and alert("aaa") runs by clicking on div1, but does not run when div2 is clicked.

body of index.html

<div id="div1" ng-init="showDiv2 = false">
    <div class="alertonclick" ng-click="showDiv2 =true" style="background-color: red"><br/></div>

</div>

<div id="div2" ng-if="showDiv2">
    <div class="alertonclick" style="background-color: green"><br/></div>
</div>

and script in index.html:

<script src="~/index.js"></script>

index.js

$(document).ready(function () {
    $(".alertonclick").click(function () {
        alert("aaaa");
    });
});
phuzi
  • 12,078
  • 3
  • 26
  • 50
mhk
  • 112
  • 1
  • 11
  • 1
    It won't work - as when the page is loaded that div does not exist - so the loaded js won't find that div – Harry Apr 17 '18 at 09:37
  • what should i do ? @Haris – mhk Apr 17 '18 at 09:38
  • 1
    you need to call **$(".alertonclick").click(function () { alert("aaaa"); });** after you html is render – Alpesh Jikadra Apr 17 '18 at 09:38
  • its an example .i can not generate angular template before html is render @AlpeshJikadra – mhk Apr 17 '18 at 09:41
  • 1
    I am not telling that you have to call it before html content, You should call it after your angular template render, if possible then create fiddle https://jsfiddle.net/ – Alpesh Jikadra Apr 17 '18 at 09:43
  • 4
    mixing jQuery and Angular is not a good thing, you should learn how to do it the [angular way](https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) – Endless Apr 17 '18 at 09:44
  • i am trying to use an jquary library in angular app and there is no angular madule for my perpose @Endless – mhk Apr 17 '18 at 09:53

2 Answers2

2

The problem is that the association between class alertonclick and it's function is done when the page is loaded. But the div2 isn't created at that point. To fix this, one solution would be to use ng-show instead of ng-if:

<div id="div1" ng-init="showDiv2 = false">
    <div class="alertonclick" ng-click="showDiv2 =true" style="background-color: red"><br/></div>
</div>

<div id="div2" ng-show="showDiv2">
    <div class="alertonclick" style="background-color: green"><br/></div>
</div>

That way the div2 is generated from the beginning and has the alertonclick function but it's hidden.

Kokogino
  • 984
  • 1
  • 5
  • 17
  • what a bout angular templates . templates generate dynamically and not have ng-if or ng-show . is there a way to run index.js codes in angular templates ? – mhk Apr 17 '18 at 09:49
  • 2
    Maybe this helps: https://stackoverflow.com/questions/20896193/angularjs-directive-with-ng-if-in-the-template – Kokogino Apr 17 '18 at 09:59
1

The problem is that you put the click listener for the ".alertonclick" class, after the page was rendered. At that time the second div is not present in the DOM. A possible solution would be to reset the click listener after the second div is displayed.

Zoltan Szabo
  • 51
  • 5