Question

下面的链接显示了一个模态并运行ajax请求，以根据对象id在模态中呈现部分。链接工作正常，当页面完全加载http请求时弹出模式，但如果我使用ajax请求呈现链接（例如弹出不同的模式并呈现一些链接），那么js函数不会跑了。我试过一个警报（）;只是为了检查，当它用ajax渲染时它不会运行。

我正在使用JQuery 1.9.1，以前js使用.live（'click'），但此后已被删除。我也试过.click（）

有什么想法吗？谢谢！

链接

<a href="/an-object-id" data-remote=true name="modal">

JS

$(document).ready(function() {
$("a[name=modal]").on("click", function(e) {
    $("#mask, #modal").show();
    e.preventDefault();
etc...

Answer 1

使用.on()将事件处理程序附加到父元素，并将选择器作为参数传递。

示例：

$(document).on("click", "a[name=modal]", function(e) {...});

也适用于动态生成的元素..

Answer 2

$(document).on("click", "a[name=modal]", function(e) {
    $("#mask, #modal").show();
    e.preventDefault();
etc...

Answer 3

用于事件委托......因为您的链接是动态生成的...不会触发click事件...使用document来委派事件..

 $(document).on("click","a[name='modal']", function(e) {
       ..
 });

您可以浏览link以了解有关on委托事件的更多信息..如果您使用文档中存在的最接近元素的事件委托事件比{{1}更好为了更好的表现

Answer 4

基本上，您需要将click事件的侦听器绑定到DOM中不会被更改的内容。 on()有一个可选参数，允许您将事件触发器过滤到选定为侦听器的项的子元素。最简单的是使用document，但我更喜欢使用我知道不会改变的最亲近的父母。所以，假设我有这个标记：

<div id="super-awesome-parent">
    <ul>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
        <li><a href="#">Some link text</a></li>
    </ul>
</div>

我可以像这样写一个on()代表：

$('#super-awesome-parent').on('click', 'a', function(event){ 
    // ... code 
});

然后，<a>事件后添加到#super-awesome-parent的所有ready()元素仍将由代理处理。

.on（“click”，function（）在使用ajax呈现链接时不起作用

4 个答案: