Is it possible to call an jQuery function on newly matched items automatically?
For example I have the following code:
$(document).ready(function(){
$('[draggable]').draggable();
});
This adds the 'draggable' to each element which matches [draggable] however when further along the road new elements with the attribute 'draggable' are added those are not getting the 'draggable()' function getting called on them.
Is it possible to monitor the DOM or something and also call this method on each new dom item which matches the selector?
I know there is something like this for 'click' events and such (the jquery delegate method) but as far as I know I can't seem to use that for this case.
Check "Mutation Events" there is an event called DOMNodeInserted maybe it helps you
by the way, check: JQuery - use element with DOMNodeInserted
You can use the arrive.js library that I developed for the exact same purpose (it uses MutationObserver internally). Usage:
document.arrive('[draggable]', function(){
// 'this' refers to the newly created element
$(this).draggable();
});
there was ".live()" for jQuery, but i see it's deprecated?!
don't get the transformation from ".live()" to the new ".on()"-method currently, but take a look # yourself and maybe ask in their forum...
this should be the right way to do...
http://api.jquery.com/live/
.on() is what you need if you are running jQuery 1.7 or later. It will run on elements as they are added to the page, as well as those already in place when it's called. If you're using an earlier version, take a look at the .live() method, which has since been deprecated but has the same functionality with added elements.
Depending on which version of jQuery you're using, look into the .on() method. If I understand what you're looking for here, it should meet your needs.
The equivalent in previous versions of the framework was .live().
Related
Which functions needs to be overwritten to recognize any DOM content changes (Application-Side), including plugins like jquery ? Do not suggest Mutation.
You might want to take a look at this technique that relies on CSS animation keyframes.
As said above, mutation specs are either deprecated or not implemented yet.
You can try using jQuery itself and bind a handler to the DOMSubtreeModified event.
$(document).on('DOMSubtreeModified', function() {
console.log('changed');
})
There is actually a warning on w3.org that says it is deprecated. This is the only way I know of, though.
In the old days, bootstrap's popover had a "live" option which allowed us to make the $('.myclass').popover({live: true}) call even before the DOM elements existed. I looked at the docs for 2.2 and this seems to be gone. What's the new way to do it?
The live mode is not used any more.
The Bootstrap JS plugins now use delegated events via the jQuery .on method. You can supply an event delegation target selector pointing to an element which might or might not exist.
$('.some-container').popover({
selector: '.has-popover'
});
Working example generating DOM elements with popover attached: http://jsfiddle.net/asKF9/
I'm trying to understand why something works the way it does in jQuery.
When I want to apply a jQuery extension, for example datatables, I run the command:
$("#some_id").datatables(.. parameters ..);
I don't know why this works, obviously the DOM element didn't have a method datatables() beforehand.
Thanks!
$("#some_id") does not return a HTML DOM element, it returns a JQuery object wrapping it.
This JQuery object does have the datatables method.
The reason for that is because you are not making this call on DOM element - you are making it on jQuery object that stores the information on the DOM objects it should influence.
And the reason .datatables() is available is that some plugin (probably DataTables) made it accessible in the way similar to this:
jQuery.fn.my_foo_func = function(){
console.log(jQuery(this));
};
If you apply the above, you will be able to do something like that:
$("#some_id").my_foo_func();
which will pass to the console the jQuery object(s) on which you invoked it.
Is it clear enough?
Once you call $("#some_id") you no longer have a DOM object but a jQuery object.
The DOM object is reachable with $("#some_id")[0].
You installed a plugin which added a method, .datatables(), to the jQuery() object, often abbreviated as $(). If you're interested in creating your own jQuery() object methods, here's a Google search to get you started.
Is there any way (aside from creating a new event) that I can tell when a particular CSS class has been added to an element?
If you don't have access to the code that's adding the class, there's a jQuery plugin called livequery that will allow you to run code when elements are added to the DOM (or when you do things like add a class to an element).
http://brandonaaron.net/code/livequery/docs
$('div.myClass').livequery(function() {
alert('myClass was added');
});
$('#someDiv').addClass("myClass"); // The livequery code will run
This works specifically with jQuery methods.
You could extend jQuery's addClass() to fire an event when it adds a class. However, this means you'll have to add classes always with this method.
If you don't do that, you'll have to poll and look for differences in the class attribute. I don't recommend doing that. Besides performance, you'll need to handle classes being removed too.
There is a DOM Level 3 specification to detect changes to an elements attributes, it is supported in a couple of browsers... Also IE supports an onpropertychange (http://msdn.microsoft.com/en-us/library/ms536956(VS.85).aspx) event too.
It's probably not going to be enough though. Your best bet is use window.setInterval() and check if the value has changed.
there are plugins such as flowplayer overlay that asks to put a "rel" attribute to the HTML element to make it trigger certain events ... the problem is , when I create dynamically elements that have that rel attribute ,, they won't trigger it ... what is the solution for this !?
You should use the live() method to trigger events for dynamically created elements.
Example:
$('selector').live('click', function(){
// your code .........................
});
Since jQuery 1.4.2 you can also use .delegate():
Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
The use of delegate can sometimes result in less and more understandable code than .live().
Edit the plugin so it uses live() to handle events.
Generally, there is the jQuery live() function to address exactly this kind of issue.
You would have to change the plugin to use live(), or run their initialization function every time new content is added.
The latter approach can be pretty resource-intensive on the client end and is not very clean, but if the number of elements in question is not too much, it can often be the easiest way.