Click function no longer working

Question

I have the following page that works as I want it to, all the JS is in the tags and no inline JS : http://www.ninjatrader-support.com/leins/SS/index.html When I put this in production, and switched from the table to a div layout the "Next" and "Previous" buttons no longer work and I had to go back to inline JS in the PHP file that creates the returned table as seen here: https://www.kinetick.com/Test/supportTest.php#Symbol-Search

this pisses me off. What could cause the code to work in one instance but not the other? both buttons aren't in the page itself but created in the PHP file and inserted into the page. Please help this is killing me!

Here's the code that works on the support url

$(document).ready(function() { 
$("#processing").hide();

var options = { 
    target: '#return',
    beforeSend: function() {
        $('#processing').show()
    },
    complete: function() {
        $('#processing').hide()
    }
    }; 
   $('#SymbolSearchForm').ajaxForm(options); 
}); 

function changestart(direction) 
{
var rowsElement  = $("#maxrows");
var rowsValue    = parseInt(rowsElement.val());
var startElement = $("#startID");
var value        = parseInt(startElement.val());
startElement.val(direction == "forward" ? value + rowsValue : direction == "back" ? value -
rowsValue : 1);
}
$("#previous").click(function(){changestart('back');});
$("#next").click(function(){changestart('forward');});
$("#lookup").click(changestart);

Answer 1

Perhaps try:

$("#previous").live("click",function(){changestart('back');});
$("#next").live("click",function(){changestart('forward');});
$("#lookup").live("click",changestart);

In both examples, it looks like the 'Next' and 'Prev' buttons are created after you have set the .click() handler. The .live() handler let's you add an event listener even if the DOM elements change.

http://api.jquery.com/live/