I have an onClick event on a button that is created using data returned from the server (via Ajax). The outline of my code is this:
$(document).on('pageinit', function() {
$.ajax({
url: '/',
dataType: 'json',
type: 'POST',
contentType: 'application/x-www-form-urlencoded',
data: textInput,
success: function (response) {
if(response.error_code!=null){
alert(response.user_message);
}
else {
//code to generate button with id tag `cvResults`
$('#cvResults').click(function(e) {
// some code here, redirects to another mobile page
}
},//then remainder of ajax function
I initially tried putting the onClick function outside the Ajax call (but within the pageinit
). This wouldn't trigger because the page would initiate without any #cvResults
tags and hence not load the function.
I now have a different problem. When you click this button and go to the other page, if you then press back
and try to click the button again, the event isn't triggered. This makes sense because there has been no response from Ajax.
How do I cater for both of these scenarios, and just permanently have the onClick event listening when the #cvResults
tag is present?