add jQuery click event to code behind generated button

Question

A button(Replybtn) is created onclick in code behind.
--Default.aspx.cs--

protected void ReloadThePanelDetails_Click(object sender, EventArgs e)
{
  litResultDetails.Text = litResultDetails.Text +
  "<button id='Replybtn' onclick='replyfunc(this); return false;'>Reply to this thread</button><br />";
}

--Default.aspx--
Click on Replybtn using javascript

 <script type = "text/javascript">
 function replyfunc(obj1) {
     document.getElementById(obj1.id).click();
  }
</script>

Use jquery click event for Replybtn

<script>
$(document).ready(function () {
 $('.replypanel').css({ "display": "none" }); //div by default no display
    $("#Replybtn").click(function () {       //onclick div to display
        $('.replypanel').css({ "display": "block" });
    });
});
</script>

The div is not displaying onclick of Replybtn (which is generated in code behind). Please suggest any other solution or any update which is required above.

Answer 1

You need to use Event delegation , for listening dynamically generated dom element

<script>
$(document).ready(function () {
 $('.replypanel').css({ "display": "none" }); //div by default no display
    $(document).on('click',"#Replybtn",function () {       //onclick div to display
        $('.replypanel').css({ "display": "block" });
    });
});
</script>