Question

我有这段代码：

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

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

顺便说一下，.mostrar_usuario_link类中的元素集是＆lt; a＆gt;标签，我正在使用DOJO支持Ajax。

我可以得到任何帮助吗？

Answer 1

这是正确的用法：

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

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

参考：

jQuery docs > on() > delegated-events approach

Answer 2

之前文档元素中提供了文档元素加载任何其他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();
    ...
});

Answer 3

使用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。

Answer 4

我想出了如何解决我的问题。由于我使用的是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
        })
    });
}

谢谢大家的支持。

当通过ajax动态创建元素时，如何使用jquery的.on（）方法？

4 个答案: