13

下面的链接显示了一个模态并运行一个 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...
4

4 回答 4

24

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

例子：

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

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

于 2013-02-20T06:41:29.483 回答
5 
$(document).on("click", "a[name=modal]", function(e) {
    $("#mask, #modal").show();
    e.preventDefault();
etc...
于 2013-02-20T06:40:24.490 回答
4

在事件委托上使用..因为您的链接是动态生成的...点击事件不会被触发...使用文档来委托事件..

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

您可以通过链接阅读有关on委托事件的更多信息。如果您委托具有文档中存在的最接近元素的事件会比document获得更好的性能要好得多

于 2013-02-20T06:41:08.083 回答
3

基本上，您需要将 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-parentready()

于 2013-02-20T06:52:06.253 回答