Question

我有一个页面，我使用jquery / ajax将一系列按钮加载到div中。这是每次用户用户滚动页面时加载的脚本。每个按钮都是可单击的，并在单击后运行jquery功能。问题是，当我切换到从不同的页面加载按钮时，现在不要调用任何方法。如果我将按钮切换到调用纯javascript函数它可以正常工作但我需要按钮来调用jquery函数，因为脚本的其余部分很长，已经在jquery中完成了。

以下是我所说的：第A页：

             $(document).ready(function() {
                 var track_load = 0; //total loaded record group(s)
                 var loading  = false; //to prevents multipal ajax loads
                 var total_groups = '<?php echo $total_groups; ?>';

              $('#results').load("testshareload.php", {'group_no':track_load}, function(result) {
                                 track_load++;
                                 }); //load first group


              $(window).scroll(function() { //detect page scroll
              });

              $('#testerino').on('click', function () {
                    console.log("CALLED");
              });

PAGE B：（testshareload.php）

<?php
    echo "<input type='button' value='Button' id='testerino'>";
?>

由于现有代码，我也无法做到这一点：

function testerino() {
      $(document).ready(function() {
      });
}

我还能做些什么来解决这个问题？

Answer 1

您正在为不存在的元素创建一个单击处理程序，这将在jQuery中失败。您需要做的是为项目创建一个DELEGATED处理程序：

$(document).on('click','#testerino', function () {
    console.log("CALLED");
});

该文档接受正在注册的处理程序，稍后当它从与选择器#testerino匹配的元素中获取单击事件时，它将触发处理程序。

Answer 2

您的问题是您将事件绑定到尚不存在的元素。

根据the docs：

事件处理程序仅绑定到当前选定的元素;他们在您的代码调用.on（）
时必须存在

您有两种选择：

改为在.load函数中创建绑定。

或者再次根据文档：

委派事件的优势在于它们可以处理来自的事件稍后添加到文档中的后代元素。通过选择一个保证在当时存在的元素委托事件处理程序附加，您可以使用委托事件避免频繁附加和删除事件处理程序。

使用$(document).on('click', '#testerino', function() { ...

如何从通过ajax加载的PHP页面调用jquery方法

2 个答案: