1

我难住了。

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

链接如下所示：

<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 库
  • 我的代码中的任何地方都没有 preventDefault
4

1 回答 1

2

使用.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 中不存在IF -
而不是#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);
     }
);
于 2013-04-02T22:29:46.020 回答