CODEWITHSUNDEEP
jqueryajax
Daniel Calderon Mori
Daniel Calderon Mori

Reputation: 5796

How to use the jquery's .on() method when the elements are created dynamically through ajax?

I have this piece of code:

$(document).ready(function() {
    $('.mostrar_usuario_link').on('click', function() {
        $("#mostrar_usuario_dialog").dialog({
            modal:false
        }) 
    });
})

The elements that are part of that class (.mostrar_usuario_link) aren't there when the document is ready because those are dynamically created via ajax only when it's requested. Anyway, the dialog is never shown and i was wondering if it's because of that.

By the way, the set of elements in the .mostrar_usuario_link class are < a > tags and i'm using DOJO for Ajax support.

Can i get any help with this?

Upvotes: 1

Views: 120

Answers (4)

Daniel Calderon Mori
Daniel Calderon Mori

Reputation: 5796

I figured out how to solve my problem. Since i was using the anchor tag of Dojo (< sx:a >), it was executing only its own script. However, you can use the "afterNotifyTopics" attribute to indicate a script you want to execute after the response.

Here is the HTML:

<s:url id="mostrar_usuario_url" action="mostrar_usuario.action">
    <s:param name="id_usuario" value="%{id_usuario}"/>
</s:url>
<sx:a cssClass="mostrar_usuario_link" id="mostrar_usuario_link_%{id_usuario}" targets="mostrar_usuario_dialog" href="%{mostrar_usuario_url}" afterNotifyTopics="lanzarCuadro">
    <s:property value="id_usuario"/>
</sx:a>

And here is the JavaScript:

$(document).ready(function() {
    dojo.event.topic.subscribe("lanzarCuadro", function() {
        $("#mostrar_usuario_dialog").dialog({
            modal:true
        })
    });
}

Thank you all for your support.

Upvotes: 0

N1ck
N1ck

Reputation: 2001

The document element is available in the head of the document before loading any other HTML, so it is safe to attach events there without waiting for the document to be ready.

http://api.jquery.com/on/#direct-and-delegated-events

$("document").on("click", ".mostrar_usuario_link", function() {
    ...
});

Also I'm not sure if you are doing this already, but if the element is an <a> tag, you might want to preventDefault to prevent the anchor tag's default action.

$("document").on("click", ".mostrar_usuario_link", function(e) {
    //Prevent Default action from link
    e.preventDefault();
    ...
});

Upvotes: 1

Ale
Ale

Reputation: 1187

When working with AJAX you have to reassign the events once the HTML you where asking for (asynchronously) is ready. How to do so? Take a look:

   $.ajax({
      url: '....',
      success: someFunction
   });

Now, you probably already have the code for someFunction, which is:

function someFunction(){
  $('.mostrar_usuario_link').on('click', function() {
      $("#mostrar_usuario_dialog").dialog({
          modal:false
      }) 
  });
}

You can have the new HTML in the success, as you probably already know, through the data parameter. For further reference take a look to the jQuery's .ajax documentation.

Upvotes: 0

VisioN
VisioN

Reputation: 145478

Here is the correct usage:

$("body").on("click", ".mostrar_usuario_link", function() {
    ...
});

Instead of body you can use any parent element of mostrar_usuario_link.

Reference:

Upvotes: 2

Related Questions