On Sun, Jan 4, 2009 at 10:27 AM, <holandmij...@gmail.com> wrote:
>
> Being an self taught old school C coder I thought it would be easier
> to migrate to PHP but I cant really complain other than my termanology
> yes thats exactly correct the anchor inside the div
Looks like we have a similar background wrt to programming.
> just curious would this after reloading the content div without
> binding will this find any anchor elements loaded inside the div and
> report them to the alert box
> note I removed the 'li' from parent()
>
> $('#content a').click(function(event)
> {
> alert($(this).parent().attr('id'));
> event.preventDefault();
> });
>
No, because when the above routine runs, jQuery binds the handler to
all the links that match. Any links which *are not yet there* will, of
course, not be bound. This is where LiveQuery comes in, because it's
told to watch certain elements and add whatever bindings to any new
child elements (that match the selector) which might happen to come
along.
> even if that doesn't I'm pretty sure that removing that anchor that
> was loaded in the new content would allow it to return the id of the
> parent of a clicked object ...
>
> $('#content').click(function(event)
> {
> alert($(this).parent().attr('id'));
> event.preventDefault();
> });
That's almost it. The trick is to use the event object to find the
target (the link, in this case):
$('#content').click(function(event)
{
var target = event.target;
alert($(target).parent().attr('id'));
/* you can use this instead of event.preventDefault()
*/
return false;
});
Because the div isn't going anywhere, the handler will always work.
And the event object doesn't care if the anchor only just appeared in
the document. It gets clicked, and it becomes that event's target.
Now, you actually want the ID of the link, not the parent, so ...
alert($(target).attr('id'));
Here's a quick example, no ajax necessary.
$(function()
{
$('#content a').click(function(event)
{
alert($(this).parent().attr('id'));
return false;
});
$('#add_1').click(function(event)
{
$('#content').append('<a href="#">click again</a>');
return false;
});
$('#delegated_content').click(function(event)
{
var target = event.target;
alert($(target).attr('id'));
return false;
});
$('#add_2').click(function(event)
{
$('#delegated_content').append('<a href="#" id="link_'+ get_id()
+'">click again</a>');
return false;
});
/* this is just a closure to produce unique IDs.
* Taken from the ajax-upload plugin, by Andris Valums.
*/
var get_id = function(){
var id = 1;
return function(){
return ++id;
}
}();
});
<div id="content">
<a href="#">content click</a>
</div>
<a href="#" id="add_1">add to content</a>
<div id="delegated_content">
<a href="#" id="link_1">delegated content click</a>
</div>
<a href="#" id="add_2">add with delegation</a>
