Search jQuery

jQuery Forum

Using jQuery

wafflehaus

Event handling DOM elements after ajax .load() -- cannot bind selector to contextMenu plugin

in Using jQuery • 11 years ago

Hello,

I'm fairly new to jQuery development, so I'm sorry if I'm missing something simple here:

I'm trying to load some html content into a page via the ajax .load() method (wrapped within the $(document).ready() function).

After I execute this, I'd like to bind all new span elements from the loaded content to a context menu plugin

like this:

$("#selector").contextMenu({
 menu: ''myMenu''
 },
  function(action, el, pos) {
    ...
    );
});
Unfortunately since the span elements are coming from the ajax request, 
I don't think I can bind a normal event handler as per the plugin. 

I found this article on the jQuery site: http://docs.jquery.com/Tutorials:AJAX_and_Events

but I don't understand how to use event bubbling in this situation. Could someone please help?

I can provide more details if necessary.
 

Replies(3)

charlietfl

Re: Event handling DOM elements after ajax .load() -- cannot bind selector to contextMenu plugin

11 years ago

bind the plugin to the new html from within the success callback of ajax

if using a shorthand ajax method like load():

$(selector).load( url, function(){

$(this).find(selector).contextmenu()

})

wafflehaus

Re: Event handling DOM elements after ajax .load() -- cannot bind selector to contextMenu plugin

11 years ago

Thanks for the response. I initially got an error when trying to use the .find method, so after a little playing around I came up with a slightly different solution binding the method into the callback function. Here's what I got:

$.ajax({
success: function() {
$('#selector').contextMenu({
menu: 'myMenu'
},
function() {
...
}
});

snesin

Re: Event handling DOM elements after ajax .load() -- cannot bind selector to contextMenu plugin

11 years ago

A plugin called "jcade" can do what you are looking for.

In your menu code, you would call something like:

$("#selector").create("span",function(event){
alert(event.target);
});

After that, any time a <SPAN> element is added to your container (regardless of how it gets there, by ajax, innerHTML, other framework), your event gets called.

You can read more/download here:

https://github.com/snesin/jcade

Top Reply

Response title

Attachments

jQuery Forum

Event handling DOM elements after ajax .load() -- cannot bind selector to contextMenu plugin

Replies(3)

Re: Event handling DOM elements after ajax .load() -- cannot bind selector to contextMenu plugin

Re: Event handling DOM elements after ajax .load() -- cannot bind selector to contextMenu plugin

Re: Event handling DOM elements after ajax .load() -- cannot bind selector to contextMenu plugin

Statistics

Tags

Actions