Jquery Live Selector

Question

I have a code like this,

<div class="panel-footer">
    <div class="post-activity">
        <i class="loading-icon"></i>
        <button onclick="ChangeColor(this);">Change Color</button>
    </div>
//Will be code
</div>

When my project working, and I click the trigger element, I code changed statu like this,

<div class="panel-footer">
    <div class="post-activity">
        <i class="loading-icon"></i>
        <button onclick="ChangeColor(this);">Change Color</button>
    </div>
    <div class="comments-ch"></div>
</div>

And my function is,

function ChangeColor(element)
{
    $(element).closest(".panel-footer").find(".comments-ch").css("background-color","#CC0000");
}

not working. Because, <div class="comments-ch"></div> is a live/append/new code.

But If I run this code, it's working

function ChangeColor(element)
 {
     $(element).closest(".panel-footer").find(".post-activity").css("background-color","#CC0000")
 }

bacause <div class="post-activity">...</div> code existing before run the application.

How can i reach the append/live code (.comments-ch)? Thanks.

possible duplicate of [jQuery 1.9 .live() is not a function](http://stackoverflow.com/questions/14354040/jquery-1-9-live-is-not-a-function) — Vucko, Aug 31 '14 at 20:03
live has been depreciated, update that first and then look into delegated events — Brian Dillingham, Aug 31 '14 at 20:03
Are you saying you want to change the CSS of an element before it exists? That's impossible. If not, `ChangeColor` will work as long as the element exists *at the moment* the event handler is *called*. — Felix Kling, Aug 31 '14 at 20:03
`
` not exist. When visible/append the button is clicked. But the ChangeColor method is exist. — Ayşegül Ertürk, Aug 31 '14 at 20:05
You'd have to manually record which operations you performed and then replay them once the element exists. You might want to have a look at React with which something like this would be easier (the color would be part of the state of the component), but it might be a bigger step for you to learn about this now, don't know. https://facebook.github.io/react/ — Felix Kling, Aug 31 '14 at 20:08
Why don't you just use jQuery `click` handler instead of `onclick` attribute like in this [demo](http://jsfiddle.net/43bbrtuL/)? First click add, then change - the div style changes. Is this what you wanted? — Ilya Luzyanin, Aug 31 '14 at 20:17
I would also suggest you reading this [discussion](http://stackoverflow.com/questions/12627443/jquery-click-vs-onclick) on jQuery click vs onclick. — Ilya Luzyanin, Aug 31 '14 at 20:25

score 0 · Answer 1 · answered Aug 31 '14 at 20:06

0

The live syntax is generally as follows

$(".selector-class").live('event', function () {
     //do your logic here
}

The event part may be click (element clicks), keyup, keydown etc

Cheers

answered Aug 31 '14 at 20:06

Ayo Makanjuola

608
7
14

1

And how does this related to / solve the OP's problem? – Felix Kling Aug 31 '14 at 20:06

score 0 · Answer 2 · edited May 23 '17 at 12:27

0

I would suggest you to get rid of onclick event handler in your markup, at least this will keep your markup separate from javascript (see this discussion for more information). So your change button should look something like this:

<button id="btnChange">Change Color</button>

And in javascript code (which should be executed on DOM ready):

$("#btnChange").click(function() {
    ChangeColor(this);
});
function ChangeColor(element)
{
    $(element).closest(".panel-footer").find(".comments-ch").css("background-color","#CC0000");
}

You can combine 2 functions in one, I kept it just to make the least changes in your code it's possible. Here is working demo.

edited May 23 '17 at 12:27

Community

1
1

answered Sep 01 '14 at 06:47

Ilya Luzyanin

7,910
4
29
49

Perfectly. "How can i reach the append/live code (.comments-ch)?" - the demo shows how to do this and works as expected. – Ilya Luzyanin Sep 01 '14 at 19:43
From the comments it seems like the OP is changing the CSS *before* the new element was added and he somehow wants retroactively apply the CSS change once the element was added. I think that's what the statements means. He already seems to know how to append new elements and how to select existing elements. But of course I could also be wrong. – Felix Kling Sep 01 '14 at 19:49
Well, as I understood it, he just can't change the color of the element because by the time the function is created, there element does not yet exist and even after dynamically adding element to DOM the function doesn't work (I've reproduced this behaviour before giving the answer). But until OP will clarify what exactly did he mean we can only guess... – Ilya Luzyanin Sep 01 '14 at 19:57

Jquery Live Selector

2 Answers2