0

考虑我页面中的以下三个语句。元素#not_ajax_element 和#ajax_element 是按钮。元素#ajax_element 通过先前的ajax 调用（未显示）加载到页面中。

// #not_ajax is 'static' element. THIS WORKS
$("#not_ajax_element").on("click", "button", function() {
   alert('Not ajax');
});

// #ajax_element is loaded by a previous ajax call. THIS DOES NOT WORK.
$("#ajax_element").on("click", "button", function() {
   alert('Not ajax');
});

// #ajax_element is loaded by a previous ajax call. THIS WORKS.    
$(document).on("click", "#ajax_element", function () {
   alert('Not ajax');
});

正如评论所确定的，静态和动态元素的 on() 语法似乎不同。

这是记录在案的行为，还是我在实施中遗漏了一些重要的东西。

4

2 回答 2

3

运行代码时，上下文元素（您选择并调用的元素.on）必须存在。这是很容易遵循的规则。您看到的行为是预期的并记录在案。document始终存在，并且您的动态元素并不总是存在。

如果您将该代码正确放置在 ajax 调用的成功回调中，您的第二个示例应该可以工作，因为此时（在成功回调中）已添加 ajax 添加的元素，这意味着您可以选择它并将其用作上下文。

于 2013-01-15T19:40:19.273 回答
1

#ajax_element 到底是什么？那是一个按钮还是只是一个 div 容器？第二个不起作用，因为您正在查看#ajax_element 内按钮的“单击”事件。第三个有效，因为您正在 document.body 上下文的整个范围内侦听“单击”事件。您必须确保在正确的上下文或范围内聆听，否则将无法正常工作。

于 2013-01-15T19:48:08.180 回答