document.getElementById innerhtml problem

[DILO3D]

I describe my problem with following simple example.

here when i click the test button it will create a new test button inside div tag.
But after that if i clicked new generated test button document.getElementById("test" ).onclick = function() is not working.

how can i add functions to new dynamically created fields?

Can anyone help me?

<div id="a" >

</div>

<input type="button" value="Test" id="test" class="form-submit"/>


<script language="JavaScript" type="text/javascript" >

document.getElementById("test" ).onclick = function(){

document.getElementById("a").innerHTML="<input type='button' value='Test' id='test' name='test' class='form-submit' />";

alert("test is clicked");

}

</script>

[urtrivedi]

you must give another name and ID to inner test button, LIKE test1, test2 etc

[DILO3D]

you must give another name and ID to inner test button, LIKE test1, test2 etc

Thanks for your reply. Even i give "test1" or different id, onclick function is not working for that id. (following fuction is not working after dynamically generate the test1 button)

document.getElementById("test1" ).onclick = function(){

alert("test");
}

[Buppy]

if you are ok with jQuery:

$(document).ready(function() {
$('#test1').live('click',function() {
alert('test');
});
});

[ko ko]

Write a function and call that function with 'onclick' event when the user was click the button. For example, the markup will be

<input type="button" value="Test" id="test" class="form-submit" onclick="generate_button()" />

And the function should go below

function generate_button(){
document.getElementById("a").innerHTML="<input type='button' value='Test' id='test' name='test' class='form-submit' />";
alert("test is clicked");
}