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

Question

I have a page where I am loading a series of buttons into a div using jquery/ajax. This is a script for loading every time the user user scrolls the page. Each of the buttons are clickable and run a jquery function after being clicked. The problem is when I switched to loading the buttons from a different page the now don't call any method. If I switch the buttons to calling a pure javascript function it works just fine but I need the button to call a jquery function as the rest of the script, which is quite long, has been done in jquery.

Here is what I am talking about: Page 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'>";
?>

It also will not work for me to do this due to the existing code:

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

What else can I do to solve this problem?

Answer 1

You're creating a click handler for an element that doesn't exist, and this will fail in jQuery. What you need to do is create a DELEGATED handler for the item:

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

The document accepts the handler being registered, and later when it gets a click event from an element matching the selector #testerino it will fire off the handler.