We Keep Coding

Jquery, cannot access css properties of dynamically generated element

I am using jQuery to append elements to a div, and all works fine.
var new_div = $('<div>My stuff</div>');
new_div.appendTo("#container");
However, I'd like the div to appear by fading in, instead of abruptly.
I notice though that I get an error when I try to access graphic properties on my dynamically generated element. So this, for example fails:
new_div.hide().fadeIn();
The console reports the following error:
TypeError: jQuery.curCSS is not a function
Do I understand this correctly, that this fails because current css properties are not defined for the dynamically generated element? Or what else can be goingg wrong?
Important edit
Additional checking and working on this pointed out to a complete misunderstanding from my part. This has nothing to do with the fact that the element was dynamically generated. I got the same thing by calling fadeIn() on whatever element.
I sincerely apologize!
I still didn't get, though, why this happens

Adding elements to the DOM takes some time, miliseconds maybe, but it's still a reason for jquery not be able to find the element.
This process might be even slower if the DOM is a large html page.
Write your code like this:
var new_div = $('<div>My stuff</div>');
new_div.appendTo("#container");
setTimeout( function(){
new_div.hide().fadeIn();
} , 150); // 100 could be also good
It might be enough time for jquery to catch the element.

I would add an id to keep track of all elements I'm creating (just my preference, but it makes it easier to code it).
var new_div = '<div id="myNewDiv1" style="display:none;">My Styff</div>'
$('body').append(new_div);
$('#myNewDiv1').fadeIn();

It does seem to be a compatibility question, although I wasn't able to figure out exactly why and how to fix it.
Adding this code fixes the problem though:
jQuery.curCSS = function(element, prop, val) {
return jQuery(element).css(prop, val);
};

Get return value from html dropdown appended from html.append

I am trying to generate a dynamic dropdown on a mouse over event over an object. I accomplished it like so,
canvas.on('mouse:move', function (e) {
$('body').append("<div id='imageDialog' style='position: absolute; top: 0; left: 0'><select id='mySelect' onchange='copy();'><option value='wipro' >wipro</option><option value='Hcl' >Hcl</option><option value='krystal kones' >krystal kones</option></select></div>");
});
This functionality works fine. But there is an issue in my next requirement where I need to capture the selected item when the user selectes an item from the drop down. I know its a long shot but I tried it by having onchange='copy();' in the drop down and alerting out the selection made like so,
function copy(){
alert(document.getElementById("imageDialog").value);
}
But as expected it gave the error Uncaught ReferenceError: copy is not defined.
I was at this for some time and had no luck whatsoever and I would really appreciate any help from you experts regarding this.
Thanks.

I'm not sure I understand some of these design decisions (generating select boxes is an odd way to do a dropdown menu) but we'll skip that part for now and get to the good stuff.
When you add new elements to the DOM after initial load, you need to think of event binding a little differently. Since these initial elements weren't around when you first said "Hey, all elements do this when I hover on you", the way you handle it is by telling a parent element instead. Sticking in jQuery-land:
$('.parent-element').on('click', '.child-element', function (){ });
This gives you the same result as assigning click directly to .child-element if it was around at initial render. You can read more about delegated events here: http://api.jquery.com/on/
Here's a fiddle that cleans up your stuff a bit: http://jsfiddle.net/g6r8k6dk/1/

without using pure javascript, use jQuery like the following code.
$('document').ready(function(){
$('#imageDialog').on('click',function(){
alert($('#imageDialog select').value);
})
})

error in converting js code to jQueryMobile

I have a javascript/jquery code http://jsfiddle.net/9773D/ for timer.
I am trying to port it to jQuery Mobile code but I am confused about the pageinit,bind,live etc window events.
In the code i see that the error is because some elements in the tick() function are not loaded in DOM before it has been invoked in the code. Can someone help me in correcting my code.
Thanks,

I changed your line to
var timeDisplay = $(".time")[0];
and that fixes it.
Edit:
Adding explanation:
Since you used innerHTML instead of $('.time').html(""), you needed to set timeDisplay to the HTML node, since innerHTML is a property of the node, not the jQuery object that is returned by the selector $('.time').

Here's a jsfiddle that shows how it could be done in a more jquery'sh way. http://jsfiddle.net/9773D/1/
timedisplay.innerHtml = "" //does not work since timedisplay is a jquery object
//timedisplay[0] is the html object so on that innerHtml does work
But jquery has the function .html("");
timedisplay.html(""); // is a bit cleaner

JQuery .attr won't retrieve or change values

I'm trying to change HTML attributes using jQuery, but no matter what I do, I can't get anything to work with jQuery's .attr().
For testing, I've written
alert($("#logo").attr("title"));
and even though I have an img with id="logo" and a title, the alert remains blank.
My full method:
function switchVideo(videoID) {
var videoPlayer = document.getElementById("example_video_1");
videoPlayer.src = "video/Occam.webm";
videoPlayer.load();
$("#example_video_1").attr("poster", "video/ss.png");
//Doesn't work:
alert($("#logo").attr("title"));
$("#logo").fadeOut();
videoPlayer.play();
}
My fade out works, so I know I imported jQuery correctly.
I've gotten it working in another document, so there must be something else in the document messing it up. Does anyone know why this simple method won't work?
You can see the source page at http://jrstrauss.net/temp/create.html

Your div has the id logo, not the img.
Try:
$("#logo img").attr("title")

You should be using $.fn.prop for that now: http://api.jquery.com/prop/

You should use prop if you are using a recent version of jQuery.

You can also try this according to your HTML:
alert( $("#logo a img").attr("title") );
Demo

You have the following markup with id logo
<div id="logo">
......
</div>
Now, you are trying to run jQuery's .attr method by following code.
$("#logo").attr("title");
as you may know .attr method retrieves attribute value of the given element but that <div> doesn't have a attribute named title. so to confirm this, try retrieving attribute that does exist, for example id. so try this
alert($("#logo").attr("id"));
This will return the value of attribute. the important thing to note is jQuery looks for attributes of given element only, It doesn't scan child elements.
So, to make it work in your case. You need to do the following
alert($("#logo img").attr("title"));
Hope it helps

jQuery objects don't work

When I store a jQuery object in a variable, like this:
var $myObject = $("div#comments");
...I can't use the object $myObject!
This is what I'm doing to change the html of div#comments:
$myObject.html(data);
It does nothing. I already tried this way too, this time to select an element inside div#comments:
$("div.comment", $myObject);
It doesn't work.
I just want to be able to save an element in a variable and then use it!
Note: some people don't put $ before the variable name, like this: myObject.

Are you calling it after the document is loaded?
// This will ensure that the code doesn't run until
// the document has loaded
$(function() {
var $myObject = $("div#comments");
});
(This is a shortcut for jQuery's .ready() method.)
http://api.jquery.com/ready/
As long as the document is loaded, and you have a <div> with the ID comments on the page when it loads, it should work.
Also remember that there can only be one element on the page with any given ID. Because of this, it is actually a little better (quicker) to do $("#comments"); instead of $("div#comments");.

You've only provided snippits of your code, so it is impossible to tell for sure, but the odds are that you are running the code in a <script> element that appears before the <div> element and don't do anything (such as use the ready event) to delay the execution of the code until the div exists.
The result is that you get a jQuery object which found no elements. Move the script element so it is after the div. Just before the end tag for the body is a good place.

The syntax is perfectly valid and should work. Are you dynamically appending the comments div? You should alert( $myObject.length ) to see if it's 0 or 1, if its 0 that means it's never picked up.
You may need to bind the var statement until after dom ready, window load, or your ajax callback.

Well, that syntax is perfectly fine so something else is going on. Can you show your markup? And what do you get if you add an alert($myObject.length)? And one last thing to check... are you running this inside an on-ready handler?

Ok, thanks everyone for that.
I got the solution.
I thought about the order the things were loaded in the DOM and found the solution.
The problem (with the markup) was:
<div id="comments">
<script type="text/javascript">
loadComments(params);
</script>
</div>
The code above was written by PHP!
So it executed the function as soon as the browser read the code.
I already tried to put the script on the end of the page, after the function was called. The funcion was not defined yet.
So, the funcion loadComments should be executed after the div was ready AND after the function was defined.
I wrapped the code between the tags with a .ready(), like this:
<script type="text/javascript">
$(function() {
loadComments(params);
});
</script>
It was a distraction.
Sorry everyone!
Thanks a lot.
If you have the same problem and you didn't understand what I did, ask me. XD