I want to apply some css using jquery to for example $('#btn').('color','red');
but the problem is that is not working for my next new added element, #btn. It work only to my existed element.
I use
$('#btn').on(function(){
$(this).css('color','red');
});
but no luck
You might want to look into DOM4 Mutation Observers (W3C Working Draft). They can be used to get notified if the DOM is changed, so you can work on the newly inserted nodes for example. Also check out the Mutation Summary library. However, not all browsers do support this feature yet.
If this seems overkill for your use case, try setting the CSS before inserting anything or firing a custom event after insertion (e.g. using .trigger()).
You can use .livequery() plugin
e.g.
$('#btn').livequery(function() {
$(this).css('color','red');
});
Hope that helps
Thanks
Related
I am adding an id to an element via call to jQuery.data:
$layout.nextAll('.imagepicker').data('imgPickerId', randomnumber);
So my element of a class imagepicker will have [imgPickerId=randomnumbervalue] data attribute added to it.
It seems like there is a problem how I later on look for .imagepicker with exactly this imgPickerId. Where can I lookup which attributes are added to a particular element in a convenient way (excep from js code)? Maybe in firebug somewhere?
P.S. for some reason my "getter code" works in jQuery 1.6 but does not in 1.7. Still I am suspecting data isn't being added to an element and need a way to check it.
jQuery's data function stores everything in JavaScript, without altering the DOM in any way. I'm afraid you'll have to use code to access it.
A quick Google search also showed me a FireQuery plugin for Firebug, which seems to enable you to see the attached data of your elements. Haven't tried it myself, though, so I can't confirm that.
Update: Tested it, and it works fine! With FireQuery all data of your elements are visible right next to the HTML:
Have you considered in writing your data in an custom attribute like data-imgPickerID="someID"?
For sure this does not allow you to save huge data but you could inspect it via firebug and since you are only saving an ID it would fit for your needs.
Which is also very cool about the .data() method is you can retrieve your custom attribute from above like so .data("imgPickerID");
data() will save data in memory (of course linked to the elements in your selector), it doesn't write things on the element, so you can't look at that in firebug.
You can pre-populate elements with some data by using the html5 data attibute though
Look at this question for an expanded explanation
How does jQuery store data with .data()?
Supposing I've got multiple div's with the same class, I could do something like :
$('.className').click(f) in Jquery or other frameworks
However, I was trying to use Sly as my selector engine and wanted to do something like :
Sly.search('.className').click(f)
I'm not sure as to how the binding in Jquery works :
If I use the above JQuery, does an eventhandler get attached to all of the found divs individually? Or does it do something else to optimize and "tell" the browser specifically to link this function f to the onclick for the className (instead of manually telling the browser to attach the same function to each of the found divs)
Is there a way to achieve the above in Sly (or other Selector Engines) without using iteration over the elements returned ?
It will add a handler to each object currently in the set.
With the default Sizzle engine, you can call .live to add a single handler to <body> which catches all bubbled events and forwards them to any register events for matching selectors (what you're asking for).
You should not worry about performance issues; the point of .live is to affect elements that are created later.
My problem is basically quite simple.
After the page has been loaded some elements are added dynamically. I don't seem to be able to access those elements using normal jquery selectors.
Whenever I need to do this, I use livequery. Livequery, basically, allows you to bind events to elements even before they are in the DOM. Have a look, I'm pretty sure that's what you need! : )
maybe .live() could be helpful: http://api.jquery.com/live/
I'm using the JQuery-UI Accordion, but I'm trying to find a way to not have to initialize it any time any new element is added. Using AJAX I'm inserting html into a page, but on any page load I am having to re-initialize any accordions-
// .ajax handler
success: function(xml) {
// find accordions
$("div.accordion").accordion();
}
Is there any way I can automatically have this run any time the DOM has changed? I know there is the livequery plugin -- but is there a simpler more elegant method?
Someone may be able to provide more information, but I'm running into a similar situation. As far as I can tell, you have to dynamically apply the accordion based upon the changed DOM. You could just use the .live function and have it run on load. Something like this has worked for me.
$('div.accordion').live('load', accordion());
See if that helps you.
I've ended up going with a different approach and tying functionality to mapped strings. I now use one attribute for everything . I do a find() based upon that and load it with it's associated value.
pseudo: $(this)[$(this).attr('ui:component')]();
I have a website that uses JQuery to construct a rather large table. When I try to select a set of input elements created this way by class and add a datepicker to them, nothing happens. The table is generated durinng document.ready(); is there a certain time I have to execute $('.date_pick').datepicker(); in order for this to work? If not, what could I be doing wrong?
If you could provide the relevant code, it would be helpful. But basically, you should be able to assign datepicker() to the appropriate elements once they are inserted into the DOM.
Here's a Working Demo of attaching the datepicker to inputs in a table that is inserted into the DOM through jQuery. Tested in Firefox 3.5 and IE 6.
Without code, you'll need to debug this on your own. Couple of guidelines:
If you're using JQuery, use JQuery's built in function rather than document.ready()
Are you sure you're declaring the datepickers after the table is generated?
Make sure the input elements don't have the same IDs, give them the same classname, then do something like.
$('.dateInputs').datePicker();