All geek questions in one place

How can I access dynamically added elements in views via jquery

I want to access and change the elements that are loaded with angular views. I can’t do this, however the item displayed in the console is just fine.

Markup

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title></title>
</head>
<body data-ng-app="myapp">
    <div class="wrap">
        <div class="header"></div>
        <div class="content">
            <div data-ng-view=""></div>
        </div>
    </div>
    <script type="text/javascript" src="/content/plugins/jquery/jquery-1.10.1.min.js"></script>
    <script type="text/javascript" src="/content/plugins/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="/content/plugins/pxgradient/pxgradient-1.0.2.jquery.js"></script>
    <script type="text/javascript" src="/content/plugins/angularjs/angular.js"></script>
    <script type="text/javascript" src="/content/plugins/angularjs/angular-route.js"></script>
    <script type="text/javascript" src="/content/plugins/angularjs/angular-animate.js"></script>
    <script type="text/javascript" src="/app/app.js"></script>
    <script type="text/javascript" src="/content/js/main.js"></script>
</body>
</html>

View

<div class="home">
    <h1 class="gradient">Transformation is comming</h1>
</div>

Javascript

$(function () {
    var element = $('.gradient');

    console.log(element); // this works

    element.css('color', 'red'); // this does not
});
+4
source share
4 answers

Ok, I think I have a solution, try the following:

app.run(function ($rootScope) {
    $rootScope.$on('$viewContentLoaded', function () {
        $('.gradient').css('color', 'red');
    });
});
+1
source

Your item may not be ready yet (not yet in the DOM).

You need to access it in the jquery function document.ready. If you use Angular, after completing the boot process, use Angular angular.element (document) .ready

: http://pairp.com/6144/1

+1

, css, . :

$('.gradient').removeAttr('style').css('color','red');
0

CSS :

   element.css({'color':'red'});
0
source

Source: https://habr.com/ru/post/1532132/

More articles:


All Articles