Question

我有一个3层数据显示：

基本HTML结构：

<article id="container">

    <header>
    <h1>Tier One (PHP Loop) <a href="#" class="confirm">X</a></h1>
    </header>
    <section> <!-- Filled by ajax call from Tier 1 -->

         <h2>Tier Two <a href="#" class="confirm">X</a></h2>
         <section>  <!-- Filled by ajax call from Tier 2 -->

             <p>Tier Three <a href="#" class="confirm">X</a></p>
             <p>Tier Three <a href="#" class="confirm">X</a></p>
             <p>Tier Three <a href="#" class="confirm">X</a></p>
             <p>Tier Three <a href="#" class="confirm">X</a></p>
             <p>Tier Three <a href="#" class="confirm">X</a></p>
             <p>Tier Three <a href="#" class="confirm">X</a></p>

         </section>

    </section>

</article>

我正在尝试通过每层中点击发起的ajax调用来设置数据库删除按钮。

$('a.confirm').on('click', function (e) {
    e.preventDefault();
    $.ajax({ }); 
});

适用于第1层，但不适用于第2层和第3层......

$('#container').delegate('a.confirm', 'click', function (e) { e.preventDefault(); $.ajax({ }); });

或

$('#container').on('click', 'a.confirm', function (e) { e.preventDefault(); $.ajax({ }); });

适用于第2层和第3层，但不适用于第1层......

函数中的所有其他内容完全相同。有一些变量，但它们都从锚点（ids等）中提取相同的必要data，然后ajax只是从处理程序发送php不同的数据。

我可以轻松地复制jQuery代码并更改处理程序。但我确信必须有办法以某种方式将处理程序组合成一个语句。

我尝试过诸如$('#container, header').delegate()或$('#container, h1').delegate()之类的事情，但这并没有什么不同。

我也尝试了bind()和live()没有运气。

这可能吗？

如果这有所不同，我正在使用jQuery 191和jQuery UI 1114。

Answer 1

从jQuery 1.7开始，.delegate（）已被 .on() 方法取代。

您要查找的是事件委派 on() ，如下所示：

$('#container').on('click', 'a.confirm', function (e) {
    e.preventDefault();
    $.ajax({ }); 
});

希望这有帮助。

如何对同一个ajax使用on（）和delegate（）？

1 个答案: