Question

我正在开发一个模块，其中包含两个页面，一个是 product.php ，另一个是 filterproducts.php

Product.php 包含一个Div元素，该元素由 product.php

中的 .load（）加载

<div id="limitpage">
</div>

.load（）函数进行ajax调用并从 filterproducts.php 获取输出

product.php 的结构如下所示

 <button id="nex" >clickme</button>
     <div id="limitpage">
        </div>
    <script>
          //Both of them are in document ready function
          $('#nexus').on('click',function () {

                alert("here");

            });
        $('#nex').click(function(){
           $('#limitpage').load("filterproducts.php");
        })

    </script>

filterproducts.php 包含一个按钮

<button id="nexus">Next Page</button>

但是，当页面加载 on（'click'，function（））时，不起作用。为什么会发生这种情况？如果不可能，那么做同样的解决方法是什么。

Answer 1

当文档准备就绪时，filterproducs.php的输出尚未出现在页面中，因此$('#nexus')将返回一个空集，因此它不绑定。

解决方案是绑定页面中存在的内容，并在单击时过滤。一个典型的例子：

$(document).on('click', '#nexus', function() { 
  alert('nexus clicked!'); 
})

Answer 2

您需要一个事件委托。只需将此视为.live() // deprecated now的替代。这会将点击功能绑定到您的按钮

$(document).on('click', '#nexus', function() { 
  alert('nexus clicked!'); 
})

.Click（）函数不工作Jquery

2 个答案: