How can I access dynamically added elements in views via jquery

Question

How can I access dynamically added elements in views via jquery

123 views Asked by Stan At 17 March 2014 at 13:30

I want to access and modify elements that are loaded with angular views. I can't seem to do it, however the element is outputted in console just fine.

Layout

<!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
});

Original Q&A

There are 4 answers

user3225497 On 17 March 2014 at 14:08

You need write CSS as object:

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

Anastasios Vlasopoulos On 17 March 2014 at 13:38

Maybe your element has a css rule that you should override. Try this:

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

ngduc On 17 March 2014 at 13:48

Your element might not be "ready" yet (not in the DOM yet).

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

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

**skmasq** · Accepted Answer · 2014-03-17T14:50:57+00:00

skmasq On 17 March 2014 at 14:50 BEST ANSWER

Ok I think I have a solution, try this:

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

TechQA.

How can I access dynamically added elements in views via jquery

Layout

View

Javascript

There are 4 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in ANGULARJS

Popular Questions

Popular Tags

Trending Questions