ajax - 如何访问通过ajax加载的div的id

Question

我有 id = new 的按钮，它加载新页面

$("#new").click(function(){
$('#message_area').load('new.php');
});

new.php 中有一个将消息发送到数据库的按钮。但我有一个问题，如果我通过ajax导航到其他一些链接并再次使用上面的代码加载new.php然后在new.php中发送按钮不起作用，它只在页面加载第一次时有效，我必须刷新页面然后它的工作原理。我认为这是因为 new.php 中的发送按钮是在第一次创建 DOM 之后添加的。请帮助提前谢谢..

Answer 1

您需要发布标记的更多详细信息以获得更准确的答案，但总体思路是使用事件委托。将事件处理程序绑定到未从 DOM 中删除的按钮的祖先。例如：

$("#message_area").on("click", "#yourButton", function() {
    //Do stuff
});

这是有效的，因为 DOM 事件通过所有元素的祖先在树中冒泡。在这里，您只是在树的较高位置捕获事件并检查它是否源自您感兴趣的事物 ( #yourButton)。

有关更多信息，请参见 jQuery .on。请注意，如果您使用的 jQuery 版本低于 1.7，则需要delegate改用。

Answer 2

//jquery >= v1.7
$("body").on('click', '#new', function(){
    $('#message_area').load('new.php');
});

//jquery < v1.7
$("#new").live('click',function(){
    $('#message_area').load('new.php');
});

Answer 3

$("#new").live("click", function(){
$('#message_area').load('new.php');
});

刚刚意识到这已被弃用-应该使用 on 代替……我的错。

Answer 4

要像这样管理动态创建的元素，您需要使用.on()（jQuery 1.7 及更高版本）或.delegate()（jQuery 1.4.3 及更高版本）来分配事件。似乎每个人都击败了我的代码，但我会发布这个以获得函数的链接。