Search jQuery

jQuery Forum

Change css of Dynamically created element?

in Using jQuery • 7 years ago

Hi. I'm having a little trouble understanding why I can't manipulate the css of a newly created element. I've created the element, targeted(I assume with .on) and the assigning addition css traits. But it's not working

http://jsfiddle.net/skfn8m3o/1/

$("body").on("click", ".frameContainer", function () {

    var clickedID = $(this).attr("id");
    alert(clickedID);
    $("#" + clickedID).css({"background-color":"black"});

});

I don't understand the process here. How come the CSS isn't being applied via this route?

Replies(2)

watusiware

Re: Change css of Dynamically created element?

7 years ago

It should work, now that you fixed it! (Please do not edit your post after you make it - make a new comment.)

When you first posted, you had:

$(clickedID).css({"background-color":"black"});

I see now you've changed it to:

$("#" + clickedID).css({"background-color":"black"});

(You didn't update your Fiddle, though)

But you don't need to use the ID at all:

$("body").on("click", ".frameContainer", function () {
$(this).css("background-color", "black"});
});

7blake

Re: Change css of Dynamically created element?

7 years ago

Thanks for the reply. It wasn't working even with the oversight on the "#". And it makes sense that it should work...

So then I thought...

I took the UI codes off of it, and what do you know... it works. There was a redundancy in this portion of the code.

      $("#" + containerID).draggable();
        $("#" + containerID).resizable();
        $("#" + containerID).addClass("ui-widget-content");

The addClass was unneeded.I assume now that by executing draggable()/resizeable it applies the class already. I'll have to look and see what it actually did though.*edit(Yeah, the simple addition of this class mucks it up. That's it)
I should just learn how to create a custom resizeable feature instead of relying on jquery maybe. Or atleast understand it.

http://jsfiddle.net/skfn8m3o/2/ <--- with addClass("ui-widget-content") (not working)

http://jsfiddle.net/skfn8m3o/3/ <---- without addClass("ui-widget-content") (works)

Fun stuff :D Thanks for the condensed code and reply.

Top Reply

Response title

Attachments

jQuery Forum

Change css of Dynamically created element?

Replies(2)

Re: Change css of Dynamically created element?

Re: Change css of Dynamically created element?

Statistics

Tags

Actions