Question

我有2个jquery函数用于加载“下一步”和“上一步”。他们是这样的：

下一步Jquery功能：

    $(".continue-btn").on("click",".next-step",function(){
         //somthing
    }

上一步Jquery功能：

    $(".continue-btn").on("click",".previous-step",function(){
         //somthing
    }

这两个函数很好地加载了我的下一个和前一个jquery内容，但在新的jquery内容中不起作用。

我的html页面由jquery函数加载

<div class="row">
      <div class="cell-12">
       <a href="javascript:void(0)" class="btn btn-large main-bg AddAddress">Add</a>
    </div>
  </div>

我有一个jquery函数用于添加如下参数：

      $(".cell-12").on("click",".AddAddress",function(){ 
         //Somthing
      }

问题出在哪里？

Answer 1

$(".cell-12").on("click",".AddAddress",function(){ 
         //Somthing
      }

您需要问自己的第一个问题是＆＃34;当我运行该行时，.cell-12是否存在？＆＃34;

看到您动态添加html内容，您的初始$('.cell-12')并不包含任何内容......因为它尚未存在。即使您将来添加该类，jquery onclick事件也不会使用您的新元素进行更新（因为它只包含调用它时的元素）。

这会让您有两种选择。

A）您将onclick事件添加到文档中，该文档将使用您的.AddAdress类

找到您的所有元素

$(document).on("click",".AddAddress", function(){

});

<强> B）

每次添加更多内容时，都会重置所有点击事件。这是一篇关于this

的stackoverflow帖子

其他信息：

您可能听说过名为.live

的内容

描述：为与之匹配的所有元素附加事件处理程序现在和未来的当前选择器。

但由于性能问题而被弃用。

Answer 2

您作为父级使用的容器必须在页面加载时出现：例如：

<div class="row">
  //content loaded with ajax...
</div>

然后这应该工作

 $(".row").on("click",".AddAddress",function(){ 
         //Somthing
   }

Jquery不适用于附加内容

2 个答案: