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/
Related
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
I'm kind of a noob in jquery, so i'm sorry if the question is a little obvious.
I wondered how should I handle an element which is created using the .html() jquery method, so
there is no way to handle it after $(document).ready. Is there anyway to create the handler when the element is created or something?
Simple as that:
$('#containerId').on('eventType', 'childSelector', handler);
Always bind the delegate event to the closest static element of the dynamic elements.
If you want to understand how this magic happens, read the on docs
For an example:
$("#mydiv").html("<span>Content</span>");
$("#mydiv span").css("background-color","blue");
so, call it after you set the .html().
I need to 'decorate' every div.myclass with a function in a way that css is doing it with style, that is some of these elements aren't on a page when this function fires, so I can't just find and loop trough them. Some of the elements are created from ajax requests, and some are changing classes.
In css when an element changes class it's style changes instantly. I also need a similar situation here when for example all divs with class1 would have declared one function and with class2 another, and when I do for example:
document.getElementsByClassName("class1")[0].setAttribute("class", "class2");
Behavior of that element should change instantly.
I prefer pure js, but if it's there a cleaner jquery or prototype way I also be glad.
Future Readers: .live() is deprecated and should no longer be used! In the previous cases where it was used .delegate() is a more preferable method.
https://stackoverflow.com/a/11115926/829835 here is what is wrong with .live()
The jQuery team itself also suggests this function is no longer used.
Check http://api.jquery.com/live/
"The .live() method is able to affect elements that have not yet been added to the DOM through the use of event delegation[...]"
I guess you need jQuery's live():
http://api.jquery.com/live/
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.
I am loading an external page that relies heavily on jquery into a div with the $.ajax(); method.
The obvious problem is that the new content needs to be binded to the dom for jquery to work... Everyone talks about just using $.getScript to do this but I can't get it to work. Can some one give me an example and not just a link to the jquery doc page for $.getScript ?
This external page has 6 js files included in it and I need them all binded to the new content as a whole and not per div as in all of the examples I can find.
"new content needs to be binded to the dom for jquery to work"
I assume that you mean that the events binded on elements do not work for the dynamically loaded content. If this is the case, you must bind the elements with live() method. So instead of:
$('#element').click(function() { ... });
Do:
$('#element').live('click', function() { ... });
This way your binds will also affect the loaded content.
If you understood your problem wrong, please let me know.