How does the jquery prom method work?

Question

I really don't understand what delegate and promise .

According to the documents -

• delegate will associate the selector and the event with some container container that can be used again in the future for current and future elements.
• promise() will reassign everything until it is first limited if all newly loaded ones match. Perhaps I really do not understand this promise method.

What if the shell still exists, but the contents in the container-container has been modified and / or reloaded via Ajax ? Why don't events fire or work the way they would be connected for the first time?

And yes, I was on the documents page, I just do not understand their explanations completely.

Answer 1

I am a little confused by this question. I think this is because you are confused by promise and delegate . These are actually completely unrelated features of jQuery. I will explain each separately:

delegate

delegate is a jQuery function that was introduced in jQuery 1.4.2. (This is a more convenient approach to live , which was added in jQuery 1.3). It solves a specific problem associated with modifying the DOM and, in particular, with AJAX calls.

When you bind an event handler, you bind it to a selection. So you can do $('.special').click(fn) to associate the event handler with all members of the special class. You are attached to these elements, so if you delete a class from one of these elements, the event will still be fired. Conversely, if you add a class to an element (or add a new element to the DOM), it will not be associated with the event.

There is a Javascript function that softens this, called a "bubble event." When an event is fired, the browser first notifies the element in which the event occurred. Then it goes up the DOM tree and notifies each element of the ancestor. This means that you can associate an event handler with an element located up the DOM tree and events triggered on any child elements (even those that do not exist when the handler is bound).

delegate is a jQuery implementation. First you select the parent element. Then you specify the selector - the handler will be launched only if the source element matches this selector. Then you specify the type of event, for example click , submit , keydown , just like bind . Then, finally, you specify an event handler.

 $('#containingElement').delegate('a.special', 'click', function() { alert('This will happen on all links with the special class'); }); 

promise

promise is another relatively recent addition to the iQuery function. It is part of the Deferred concept, which was introduced in jQuery 1.5. (I think that the similarity in sound between “deferred” and “delegate” is probably a source of confusion.) This is a way to ignore the complications of asynchronous code. The best example of this is with AJAX calls, since the object returned by $.ajax is a Deferred object. For example:

 $.ajax({ url: 'somepage.cgi', data: {foo: 'bar'} }).done(function() { // this will be run when the AJAX request succeeds }).fail(function() { // this will be run when the AJAX request fails }).always(function() { // this will be run when the AJAX request is complete, whether it fails or succeeds }).done(function() { // this will also be run when the AJAX request succeeds }); 

Thus, it is in many ways similar to the processes of binding to successful execution in the $.ajax call, except that you can bind more than one handler, and you can bind them after the initial call.

Another time it would be useful to process the animation asynchronously. You can provide callbacks for functions, but it would be better to do this with similar syntax with the AJAX example that I provided above.

In jQuery 1.6, this functionality has become possible, and promise is part of this implementation. You call jQuery a promise , and you get an object with which you can associate event handlers when all animations in the object are complete.

For example:

 $('div.special').fadeIn(5000).promise().then(function() { // run when the animation succeeds }).then(function() { // also run when the animation succeeds }); 

Again, this is similar to traditional methods, but it adds flexibility. You can bind handlers later, and you can bind more than one.

Summary

In principle, there is no significant relationship between delegate and promise , but they are useful features in modern jQuery.