I would really appreciate some help on this...
I have a simple button and a function bound to the ID so clicking on the button produces some output (a table). What I wanted to do is then have another button/clickable in the table that, when clicked, it would produce more output but I can't seem to get it to work. If I have 2 buttons - one bound to one function and one bound to the other they both work but the same function doesn't seem to work when the button is produced by the first function:
Here's the code (some edits but the basics):
$(document).ready(function() {
$('#expand').click(function() {
$.get('http://localhost/receipts.xml', function(data) {
$('#fullrec').empty();
$(data).find('Receipt').each(function() {
var html = '<div id="receipt2">';
...
html += '</div>';
$('#fullrec').append($(html));
});
});
});
$('#example').click(function() {
$.get('http://localhost/receipts.xml', function(data) {
$('#output').empty();
$(data).find('Receipt').each(function() {
var html = '<div id="receipt">';
var dt = $(this).find('DateTime').text();
var trans = $(this).find('TransactionID').text();
var ID = $(this).find('PartyID').text();
var date = dt.substring(0,10);
var time = dt.substring(11,19);
html += '<table border="1"><tr>';
html += '<td> <input type="button" value="expand" id="expand"/></td>';
html += '<td>' + ID + '</td>';
html += '<td>' + date + ' ' + time + '</td>';
html += '<td>' + trans + '</td></tr>';
html += '</div>';
$('#output').append($(html));
});
});
});
});
</script>
</head>
<form>
<body>
<input id="example" type = "button" value="select"/>
<input id="expand" type = "button" value="select"/>
</form>
<div id="output"></div>
<div id="fullrec"></div>
If the 2 buttons are clicked above the output is correct but if the button that is produced in the table by clicking on the example button - there is no output - nothing happens.
Is it possible to bind to an html ID that is dynamically produced in this way? Any suggestions on how to do this?