Ajax 没有在 Modal Popup 中触发

Posted 2023-04-13

【中文标题】Ajax 没有在 Modal Popup 中触发

【英文标题】：Ajax not firing inside Modal Popup

【发布时间】：2015-11-22 13:50:00

【问题描述】：

目前我有一个按钮可以查看购物车内容：

<a href="#" class="btn btn-info" role="button" data-toggle="modal" data-targets="showvendorcart1" data-target="#showvendorcartModal" data-async="true" data-cache="false" data-endpoint="vendor/showcart/$vendorid">SHOW CART</a>

data-target 用于我的模态

data-targets 用于 ajax 端点返回响应后的模态主体

我的Ajax代码如下：

$('a[data-async="true"]').click(function(e)
    e.preventDefault();
    var self = $(this),
        url = self.data('endpoint'),
        target = self.data('targets'),
        cache = self.data('cache');

    $.ajax(
        url: url,
        cache : cache,
        success: function(data) 
            if (target !== 'undefined')
                $('#'+target).html( data['response'] );
            
        
    );
);

（由jQuery and data-attributes to handle all ajax calls?提供）

现在，一旦出现模式对话框弹出窗口，我在表格中就有了一些网格项目，例如：

<table id="itemstable" class="table table-striped table-bordered">
    <thead class="fixed-header">
        <tr>
            <th>QTY</th>
            <th>SKU</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>' . $v->qty . '</td>
            <td>' . $v->sku . '</td>
            <td><a href="#" class="btn btn-danger" data-targets="showvendorcart1" data-async="true" data-cache="false" data-endpoint="vendor/removecart/' . $v->id . '">&nbsp;X&nbsp;</a>
        </tr>
    </tbody>
</table>

我遇到的问题是我对每个表格行项目都有另一个 ajax 端点调用，但是这次当我单击它时，Ajax 根本没有触发。我查看了我的浏览器检查器，但没有发现错误或尝试。

我是否在这里遗漏了什么，因为它实际上是我运行以获取弹出窗口并在正文中显示响应的相同代码，但现在唯一的区别是我在模态中执行此操作。

感谢您的帮助！

【问题讨论】：

modal是动态生成并插入到DOM中的？如果是这样，click() 将不起作用，您将需要使用 on('click', function() ... )。

@Jeemusu 是的，谢谢你成功了！

【参考方案1】：

把它改成这个，它应该可以工作了。

$(document).on('click', 'a[data-async="true"]', function (e) 
  e.preventDefault();
  // your code here

);