Hi all,
I want to make a selection in a list created by a php-file that is
called from another php-file using jQuery and ajax but I can not get
any events to the newly created html elements.
My example is very limited but shows the main problem.
The first php-file has abutton defined like this:
<input class="mini_browse" name="mini_browse_btn"
id="mini_browse_btn" type="button" value="Browse test" />
I also have a div to show the result:
<div id="myresult">Show the result here</div>
The jQuery entry looks like this:
jQuery(document).ready(function($) {
$('.mini_browse').bind("click", function() {
$.ajax({
type: "get", url: "test-ajax.php", data: { action:
'test' },
error: function() {$("#myresult").html("Ajax error");},
success: function(html){ //so, if data is retrieved,
store it in
html
$("#myresult").html(html);
}
}); //close jQuery.ajax
return false;
});
});
When I click the button I get a call to test-ajax.php as expected and
the output is displayed in the myresult div.
The test-ajax.php executes this:
echo '<input class="test_select" type="button" name="test_select_1"
id="test_select_1" value="Select" />';
Firebug console reports this response:
<input class="test_select" type="button" name="test_select_1"
id="test_select_1" value="Select" />
The updated div shows this result (according to Firebug):
<div id="myresult">
<input id="test_select_1" class="test_select" type="button"
value="Select" name="test_select_1"/>
</div>
I can not get any events from the newly created button and when I
execute
var x=document.getElementsByName("test_select_1");
x.length returns zero so the element seems not to exist.
Do I have to do anything to get the newly created element into the
documents DOM or what can I do to make this work?
Thanks!
