jQuery Cascading drop down issue on dynamic table row

jQuery Cascading drop down issue on dynamic table row

Hi Guys,

This is regarding an issue related to the dynamic html table row controls, binded events. I have a 2x2 html table (which will be n x 25), where we do have cascading drop downs. I have succesfully implemented the cascading dropdown there. But, the problem coming is while I am adding new rows to the table dynamically, the cascading drop downs are not working any more, on child rows. But, it's working properly on the top row. The code is as below -


HTML -

<table style="border:1" id="tblForm">
<tr>
            <td>
                <a href="#" id="btnDel"><img src="Image/DeleteRed.png" alt=""
                        style="text-align: left; border:0; border-color:White;" /></a>
            </td>
            <td class="style1">
                <select  name="ddlWrkPkg" style="width:100px;"/>
            </td>
            <td>
                <select  name="ddlStage" style="width:100px;"/>
            </td>
        </tr>
       
        </table>
        <table id="tblBtn" style="width:50%; border:1" align="left">
            <tr>
                <td class="style2">
                    <a href="#" id="imgBtnAdd"><img src="Image/Addrow_icon.gif" alt=""
                        style="text-align: left; border:0; border-color:White;" /></a>
                </td>

                <td>
                    <a href="#" id="imgSBtnsave"><img src="Image/save_button.jpg" alt=""
                        style="text-align: left; border:0; border-color:White; padding-left:2px" /></a>
                </td>
            </tr>
        </table>



jQuery -


 $(document).ready(function () {
            $.ajax({

                /*=========================== Populating Parent Drop Down List ===================================*/
                type: "POST",
                url: "CascadingDropDown.aspx/FetchWorkPackages_ArrayList",
                data: '',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    //$("select[name$=ddlWrkPkg]").empty().append($("<option></option>").val("[0]").html("Please select"));

                    $.each(msg.d, function () {
                        if (this['Value'] != "")
                            $("select[name$=ddlWrkPkg]").append($("<option></option>").val(this['Value']).html(this['Text']));

                    });

                    loadStage($("#ddlStage :selected").text());
                },
                error: function () {
                    alert("An error has occurred during processing your request.");
                }
            });

            /*=========================== Populating Child Drop Down List ===================================*/

            var $ddlPkg = $("select[name$=ddlWrkPkg]");
            $ddlPkg.bind("change keyup", function () {
                if ($(this).val() != "0") {
                    loadStage($("select option:selected").val());
                }
            });

            function loadStage(selectedItem) {
                $.ajax({
                    type: "POST",
                    url: "CascadingDropDown.aspx/FetchStage",
                    data: "{packageName: '" + selectedItem + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    async: true,
                    success: function Success(data) {

                        $("select[name$=ddlStage] > option").remove();
                        for (var i = 0; i < data.d.length; i++) {
                            $("select[name$=ddlStage]").append(
                            $("<option></option>").val(data.d[i].Text).html(data.d[i].Value)
                        );
                                }
                    },
                   
                    error: function () {
                        alert("An error has occurred during processing your request.");
                    }

                });
            }

            /*=========================== Add Dynamic Row to the Table ===================================*/

            $("a#imgBtnAdd").click(function () {
                $('#tblForm tbody>tr:last').clone(true, true).insertAfter('#tblForm tbody>tr:last');
            });
            });


I have attached the code file as well along with this.

So, to be precise cascading functionality is not at all working to the respective table row. Where as it's working on the top most row. Can you please help me to come out of this problem?