Question

我很难过。

我创建了一个链接，弹出一个效果很好的表单。

这是链接的样子：

<a class="buttonA right popForm" m="guest">form</a>

在形式上，ajax是一个php页面，除了所有其他gobbledygook，
它拉出了这两条更相关的路线：

<a class="buttonA right closeForm">X</a>
<a class="test">test</a>

这是jQuery：

$J(document).ready(function () {
    $J(".popForm").click(function () {
        var t = $J(this).attr("m");
        var id = ($J(this).attr("id") !== undefined ? $J(this).attr("id") : 0);

        $J.ajax({
            beforeSend: function () {
                //console.log(1);
            },
            url: "popForm.php",
            type: 'POST',
            data: ({
                "t": t,
                "id": id
            }),
            success: function (results) {
                $J("#popup").html(results);
                $J("#popup").show();
            }
        });
    });
    $J(".test").on("click", function (e) {
        console.log("e"+e);
        alert('aa');
    });
    $J(".closeForm").on("click", function () {
        alert(333);
    });
});

现在我期待我的“X”链接关闭表格（或者在这种情况下用333提醒我），
但链接已经死了。
实际上，两个链接都已死了。

我几乎没有巧妙的调试想法

我正在运行最新的jQuery lib
我的代码中没有任何preventDefault

Answer 1

使用.on()但在delegated-events approach之内：

$J("#popup").on("click", ".test", function (e) {
    console.log("e"+e);
    alert('aa');
});
$J("#popup").on("click", ".closeForm", function () {
    alert(333);
});

点击“通话弹出”按钮时，如果#popup未出现在DOM中，则代替#popup使用某些按钮其他父元素！

http://api.jquery.com/on/#direct-and-delegated-events

委托事件的优势在于它们可以处理来自稍后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委派事件来避免频繁附加和删除事件处理程序的需要。例如，此元素可以是模型 - 视图 - 控制器设计中视图的容器元素，如果事件处理程序想要监视文档中的所有冒泡事件，则可以是文档。在加载任何其他HTML之前，文档元素在文档的头部可用，因此可以安全地将事件附加到那里而无需等待文档准备就绪。

jQuery将表现得像：

$J("#popup").on(    // Ohh I know this guy it's in the DOModel!
                    // let's see what event bubbling will he listen for...
     "click",       // hihi, I know this event! That event should descend from...
     ".closeForm",  // hm, there's no such fella yet, 
                    // but if one day if I find him...
     function () {  // I'll show him what's a function!!!
          alert(333);
     }
);

即使使用ON方法，jquery click事件也不会触发

1 个答案: