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

我有这样一段代码：如何在通过ajax动态创建元素时使用jquery的.on（）方法？

$(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。

我可以得到任何帮助吗？

来源

2012-06-05 Daniel Calderon Mori

相信与否，这*实际上覆盖了*在文档中......它被称为“委托”事件并取代委托（取代“现场”）。 – 2012-06-05 21:25:08

我会建议看看jQuery的ajax支持：http://api.jquery.com/category/ajax/ – N1ck

我想出了如何解决我的问题。由于我使用的是Dojo的锚标记（< sx：a>），因此它只执行自己的脚本。但是，您可以使用“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 
     }) 
    }); 
}

谢谢大家的支持。

来源

2012-06-06 01:57:02

下面是正确的用法：

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

而不是body你可以使用任何mostrar_usuario_link父元素。

参考：

jQuery docs > on() > delegated-events approach

来源

2012-06-05 21:18:07 VisioN

+1 *仅仅是因为提及'body'可以是“...的任何父元素”。使用更接近预期目标的父母将导致稍微更多（可能不明显）如此有效的执行，但更重要的是，IMOHO为事件提供了更好的界定范围。 – 2012-06-05 21:21:17

我欣赏的帮助，但似乎并没有工作。我应该提到，这套元素是< a >标签，因为我试图用任何其他元素的方法，它的工作。 –

@DanielCalderonMori这很奇怪。实际上，单击哪种元素没有区别，这种方法应该与任何可点击元素完美配合。 – VisioN

文档元素是文档的头部可用之前装载任何其他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(); 
    ... 
});

来源

2012-06-05 21:20:06 N1ck

当使用AJAX工作，你必须重新分配一旦HTML的事件，你问的地方（异步）已准备就绪。如何做？请看：

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

现在，你可能已经有someFunction，这是代码：

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

您可以在成功新的HTML，因为你可能已经知道，通过数据参数。如需进一步参考，请参阅jQuery's .ajax documentation。

来源

2012-06-05 21:35:54 Ale

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

回答

相关问题