For example:
$('#enquiry-form').on('click','.close', function(){
$(this)..code..
});
$(this) would reference '.close' but is there a way to reference $('#enquiry-form') in a similar fashion to using javascript's this or $(this)?
You can use event.delegateTarget to get the delegated target.
Live Demo
$('#enquiry-form').on('click','.close', function(event){
alert($(event.delegateTarget)[0].id);
});
This property is most often useful in delegated events attached by
.delegate() or .on(), where the event handler is attached at an
ancestor of the element being processed. It can be used, for example,
to identify and remove event handlers at the delegation point, jQuery Doc.
Yes, you can refer it by using $(this).parent(). ...
you can use parents or closest
$(this).parents('#enquiry-form')
or
$(this).closest('#enquiry-form')
If you have multiple parent dom with same selector(say classname enquiry-form), You can use .closest() along with this:
$(this).closest('.enquiry-form');//would be $(this).closest('#enquiry-form') in your case
But as ids are unique,You can simply use:
$('#enquiry-form')
Surely, you have to call your code in this way:
$('#enquiry-form').on('click','.close', function(){
$(this).parent().code..
});
DEMO
Related
I'm trying to add a click bind to the icon-next class if the td element doesn't have the ui-disabled class without using if statements if possible (no pun).
$(".icon-next:not(.ui-disabled)").bind('click',function(){});
You want to do it like this:
$("td:not(.ui-disabled) .icon-next").bind("click",function(){});
As Johannes said, it would be a better idea to use .on() in order to delegate the event in case the .ui-disabled class is removed.
$("body").on("click", "td:not(.ui-disabled) .icon-next", function(){});
Billy was spot on with his code, though I would suggest you use .on() instead and use a delegated event so that events are properly bound/unbound.
$('body').on("click", "td:not(.ui-disabled) .icon-next", function(){});
$(".hovertip").parent().live('hover', function() {
...
The above code doesn't seem to register.
This doesn't seem to work either:
$(".hovertip").parent().live({
mouseenter:
function() {
...
Any examples of .live, .delegate, .bind, or .on working with a jQuery selector and a .parent() selector with .hover() or mouseenter: and mouseleave:?
Update: I've created a separate question to address the dynamic DOM issue this Question has raised: jQuery .on() with a .parent() and dynamic selector
Try:
$(".hovertip").parent().on('hover', function() {
alert('yay');
});
Note: .on was introduced in jQuery 1.8.
Working demo http://jsfiddle.net/pRB8n/ Hover over test test - in the demo
If you really want to use .delegate try this please: http://jsfiddle.net/TURBX/2/ - http://api.jquery.com/delegate/
Delegate
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.
Hope rest fits the needs :)
P.S. - .live is deprecated: for further if you keen - my old post here: :) What's wrong with the jQuery live method?
under category you will see: http://api.jquery.com/live/ "deprecated"
I would add a comment to Tats_innit's post, but I can't.
As per the documentation on live,
Chaining methods is not supported. For example, $("a").find(".offsite, .external").live( ... ); is not valid and does not work as expected.
That's why .parent() does not work.
Binding to parent
Event delegation (handled by the deprecated live and .delegate, and now by .on/.one) only moves downwards. You can't have an upward event delegation like you seem to want to do here.
That is to say if the parent of ".hovertip" does not exist then clearly ".hovertip" does not exist so you are actually binding to nothing.
If your goal is to bind the event to the parent of ".hovertip" when it appears, then you're SOL since delegation only moves downwards (to descendants).
Your options to handle that would be:
* Bind to the parent of .hovertip when it is appended to the DOM.
* Know a selector for the parent of .hovertip ahead of time and bind to it immediately, perhaps through delegation.
Delegating to child
If your goal is to have the event fire when .hovertip is hovered, but .hovertip may not be in the DOM and its parent is not known, you must use a method like this:
$("known parent selector of .hovertip").on('hover', '.hovertip', function () {
"known parent selector of .hovertip" has to be an element that you know ahead of time. If you can't know, you have to use document, but I'd suggest to try to get as close as possible. You can only use this on elements that exist in the DOM at the time of binding.
I think what you are looking for, actually, is something along these lines:
$(document).on('mouseover', '.hovertip', function() {
// handle your mouseover changes, here
});
$(document).on('mouseout', '.hovertip', function() {
// handle your mouseout changes, here
});
.live, .bind, are all deprecated, AFAIK, which means they'll go away in the future, and you might not want to rely on their continued support.
It would also be far better to replace $(document) with a selector that's closer to your .hovertip elements, but above them in the DOM nesting, so they can respond to your event, but without forcing jQuery to watch for every event on every element in the whole document. I simply put document in there as an example, as I don't know what the rest of your structure looks like.
http://jsfiddle.net/mori57/qa7py/
As I think about it, I think it's worth pointing out that throwing things to .parent() may not always work out the way you expect, especially if you're modifying the DOM. I think it's far safer to set a higher-level event handler.
If you must use something like the .parent(), I always found more accurate results with .closest(), and giving it a selector also helps the parsing engine narrow its search. You don't want one parent triggering the hover state for /all/ the .hovertips at one time, which could happen in some cases.
I've been reading about replacing jQuery live() functions with on(), but they only work the same way as non-live functions.
For example, using the $('a').on('click', function(){}); has the same effect as using: $('a').click(function(){});
I need to replicate the functionality of $('a').live('click', function(){});
because I'm adding elements to the page dynamically.
You need to provide a selector:
$('#container').on('click', 'a', function(){})
Where #container is the id of the static parent of all the relevant anchors.
Try to attach the on to the closest static parent.
on docs:
if selector is omitted or is null, the event handler is referred to as
direct or directly-bound. The handler is called every time an event
occurs on the selected elements, whether it occurs directly on the
element or bubbles from a descendant (inner) element.
When a selector is provided, the event handler is referred to as
delegated. The handler is not called when the event occurs directly on
the bound element, but only for descendants (inner elements) that
match the selector. jQuery bubbles the event from the event target up
to the element where the handler is attached (i.e., innermost to
outermost element) and runs the handler for any elements along that
path matching the selector.
The equivalent of:
$('a').live('click', function(){});
is this:
$(document).on('click', 'a', function(){});
But, .on() is more powerful because rather than attach all event handlers to the document object like .live() does, you can pick a static parent that is much closer to your dynamic objects and will be more efficient, particularly if you have a lot of delegated event handlers.
For example if you had a container div called links, you would do this:
$("#links").on('click', 'a', function(){});
The selector in the jQuery object is the static object that you want the event handler bound to. The selector in the arguments to .on() is a selector that matches the objects who's events you want to handle that will bubble up to your static parent object.
Hello I am having a problem with .html function in jquery. event listener doesn't work anymore everytime i remove the script from the codes and paste it again. can you help me how to reactive script after it's re-paste in html.
You can set your events using .live() method. Like:
$("#submit_button").live("click",function(e){
});
This way if you are adding/removing html from your page using .html() method, the events will remain intact.
Hope that helps.
You could use the .live() method to register the event handler which will preserve it even if the corresponding DOM element is recreated. Example:
$(function() {
$('#someid').live('click', function() {
//
});
});
I guess you are changing the inner html of some container with .html() function of jquery and the events you assigned are lost after the process. There are two approaches you can take:
If the content doesn't change use the .detach() function to remove and insert your elements back. The .detach() function preserves and event handlers attached to the elements you detach. However if you are inserting a different content then use .live() event to assign your events. The events that are assigned with .live() will be recreated when a element with the same selector is inserted into the dom.
Use this as an example:
$('a.button').live('click', function(){
//anchor tag clicked.
alert('Button has been clicked');
});
The .live():
Attach a handler to the event for all
elements which match the current
selector, now and in the future.
The .live() method is able to affect
elements that have not yet been added
to the DOM through the use of event
delegation.
This means that you add and remove html from your page with .html() and your events will still perform.
See the jQuery website for more information on .live()
A quick jsFiddle example.
Is it possible to clone event from one element, to another.
For example:
$('.somelink').click({data:data},somefunc);
I need event in another place in document for element with different class.
You can pass multiple selectors to $(), separating them by comma. Like this:
$('.somelink, .some-otherlink, #third-id').live('click', {data:data}, somefunc);
Now they all share the same click event
The jQuery .clone() function has an optional withDataAndEvents argument which will copy the node itself, all attached events and any inline data.
See http://api.jquery.com/clone/ for more details.
Extending on #moe's answer. Use .live() to bind events to elements even if they are not in the DOM. They will be bound as soon as they exist.
$('.somelink, .some-otherlink, #third-id').live('click',{data:data},somefunc);
To copy it, you can do:
$('.somelink').click( $('.otherlink').attr('onclick') );