当通过ajax动态创建元素时,如何使用jquery的.on()方法?

时间:2012-06-05 21:17:21

标签: jquery ajax

我有这段代码:

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

当文档准备好时,属于该类的元素(.mostrar_usuario_link)不在那里,因为只有在请求时才通过ajax动态创建这些元素。无论如何,对话框从未显示过,我想知道是不是因为这个。

顺便说一下,.mostrar_usuario_link类中的元素集是< a>标签,我正在使用DOJO支持Ajax。

我可以得到任何帮助吗?

4 个答案:

答案 0 :(得分:2)

这是正确的用法:

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

您可以使用body的任何父元素代替mostrar_usuario_link

参考:

答案 1 :(得分:1)

  

之前文档元素中提供了文档元素   加载任何其他HTML,因此可以安全地在那里附加事件   等待文件准备好。

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

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

此外,我不确定您是否已经这样做了,但如果该元素是<a>标记,您可能希望preventDefault阻止锚标记的默认操作。

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

答案 2 :(得分:0)

使用AJAX时,一旦要求(异步)的HTML准备就绪,就必须重新分配事件。怎么办?看看:

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

现在,您可能已经拥有 someFunction 的代码,即:

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

您可以通过 data 参数获得成功中的新HTML,您可能已经知道了。如需进一步参考,请查看jQuery's .ajax documentation

答案 3 :(得分:0)

我想出了如何解决我的问题。由于我使用的是Dojo的锚标签(&lt; sx:a&gt;),因此它只执行自己的脚本。但是,您可以使用“afterNotifyTopics”属性指示要在响应后执行的脚本。

这是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>

这是JavaScript:

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

谢谢大家的支持。