使用jQuery的AJAX功能

看来这个主题是反复出现的，但很抱歉，我找不到任何答案来解决我的问题。使用jQuery的AJAX功能

我正在使用jQuery来使用Ajax更新div内容。此更新由更新的div内的项目触发。

$(function() { 

    $(".add").on('click',function(){ 
     $("#table").load("displayTable.php"); 
    }); 

    // just to see if I can update the DOM... 
    $('input').on('click',function(){ 
     $(this).css("background","red"); 
    }); 

});

HTML：

<div id="table"> 
     <input type="text" />    
     <a class="add">Add</a> 
    </div>

由于未更新DOM，jQuery的功能都只能在原来的#table，而不是AJAX加载一个工作。

我没有真正很好地理解如何使用上（），我想这将是更新的监听器解决方案......

感谢您的帮助:)

来源

2012-03-07 Yako

我没有看到任何AJAX调用。 – j08691 2012-03-07 16:43:36

@ j08691'.load'是一个AJAX函数。 – lonesomeday 2012-03-07 16:51:48

@lonesomeday - 的确如此。呃，这太早了... – j08691 2012-03-07 16:52:47

让我们先来定义几个术语开始。事件处理程序绑定的元素称为捕获元素。事件发生的元素（所以点击元素）是发起元素。

这些元素不一定是相同的，因为Javascript 冒泡中的事件，也就是说，始发元素的所有祖先元素被通知了该事件。所以你可以在任何祖先元素上处理事件。这被称为事件代表团。

on方法是做事件委托的好方法。原始选择中的元素是捕获元素：事件处理程序将绑定到此元素。如果这个元素总是存在的 - 即它不会被AJAX取代 - 你可以确定所有的事件都会被这个处理器处理，即使它们来自尚不存在的元素。

的on最简单形式仅具有一个选择器，它被视为两个始发元件和摄像元件：

$('input').on('click', function() {

该处理程序被绑定到所有input元素和事件，对input元件起源由它处理。但是，绑定处理程序时只存在input个元素将绑定处理程序，所以这对您来说并不好。

还有另一种语法，带有一个附加选择器。这允许您指定绑定处理程序的元素以及指定其起源位置的另一个选择器。在这种情况下，#table将永远存在，所以我们可以绑定到：

$('#table').on('click', 'input', function() {

这上面说，“一个事件处理程序绑定到#table，但只有激活它，如果该事件是一个input元素上点击”。

来源

2012-03-07 16:50:00 lonesomeday

非常感谢您的详细解释。这比jQuery doc好得多;） – Yako 2012-03-07 17:03:44

您需要使用.on()

事件代表团语法试试这个：

$(function() { 

    $(".add").on('click',function(){ 
     $("#table").load("displayTable.php"); 
    }); 

    // just to see if I can update the DOM... 
    $("#table").on("click","input",function(){ 
     $(this).css("background","red"); 
    }); 

});

来源

2012-03-07 16:42:01

非常感谢！即使使用文档，此事件委派语法也不是那么明显...... – Yako 2012-03-07 16:48:51

想法是您将事件绑定到表，然后将其委托给它的子元素。 – 2012-03-07 17:02:40

使用jQuery的AJAX功能

回答

相关问题