Accessing dynamically created row in jquery function

Question

I have table that contains some select drop downs. Initially the table contains only one select drop down named 'item_code'. There is button named 'Add More' which will add more select button in that table with same named 'item_code'. I want display an alert message using jquery function on the onchange event of the select drop down... My problem is I am able to access the static select drop down in jquery function, but unable to access the dynamic select drop downs. Jquery function is given below-

$(function () {
            var theValue;
            $('select').focus(function () {
                theValue = $(this).val();
            });
            $('select[name="item_code"]').change(function () {
                alert(theValue);
            });
        })

and my html code is given below-

<div style="height:240px; overflow:auto">
    <table id="dataTable" name="dataTable" border="1" bgColor="#9999CC" align="center" cellspacing="0" cellpadding="5">
        <tr>
            <td>Item Name</td>
            <td>
                <select name="item_code">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </td>
        </tr>

    </table>
    <center>
                <INPUT type="button" id="add_items" value="Add Items" onClick="addRow('dataTable')" />
                <INPUT type="button" id="delete_items" value="Delete Items" onClick="deleteRow('dataTable')" />
        </center>    
</div>

and the javascript function for adding and deleting rows are given below

function addRow(tableID) {

            var table = document.getElementById(tableID);
            if (typeof  addRow.s_no == 'undefined') {
                addRow.s_no = 2;
            }
            else {
                addRow.s_no++;
            }
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;
            for (var i = 0; i < colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[1].cells[i].innerHTML;

                switch (newcell.childNodes[0].type) {
                    case "text":

                        if (i == 1) {
                            newcell.childNodes[0].id = "s_no" + (rowCount - 1);
                            newcell.childNodes[0].value = addRow.s_no;
                        } else{
                            newcell.childNodes[0].value = "";

                        }
                        break;
                    case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                    case "select-one":
                        // alert("i......"+i);
                        if(i == 3){
                            //newcell.childNodes[0].name = "item_code";
                            newcell.childNodes[0].id = "item_code" + addRow.s_no;
                            newcell.childNodes[0].selectedIndex = 0;
                        }else
                        {
                            newcell.childNodes[0].id = "item_category_code" + addRow.s_no;
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                        }
                }

            }
        }

        function deleteRow(tableID) {
            try {
                var table = document.getElementById(tableID);
                var rowCount = table.rows.length;

                for (var i = 0; i < rowCount; i++) {
                    var row = table.rows[i];
                    var chkbox = row.cells[0].childNodes[0];
                    if (null != chkbox && true == chkbox.checked) {
                        if (rowCount <= 2) {
                            alert("Cannot delete all the rows.");
                            break;
                        }
                        table.deleteRow(i);

                        rowCount--;
                        i--;
                    }


                }
                var count = 1;
                for (var row = 0; row < addRow.s_no; row++)
                {
                    // alert(addRow.s_no);
                    //  document.getElementById(id).id="s_no"+row;
                    var id = "s_no" + row;
                    if (document.getElementById(id) != null) {
                        document.getElementById(id).value = count;
                        //  alert("count=="+count);
                        count++;
                    }
                }
                addRow.s_no = count - 1;
            } catch (e) {
                alert(e);
            }
        }

Can anybody give a solution for this problem

palaѕн · Accepted Answer · 2013-11-18 08:18:03Z

1

Since the select drop down named item_code is added dynamically, you need to use event delegation to register the event handler like:-

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#tableID').on('change', 'select[name="item_code"]', function() {
    alert(this.value);
});

where, tableID is the ID of the static parent table, where select drop down is added using the Add More button.

edited Nov 18, 2013 at 8:18

answered Nov 18, 2013 at 7:14

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

palaѕн Over a year ago

@user2998739: Seems working here in th Fiddle Demo

user2998739 Over a year ago

Is any congiguration needed to support higher version of jquey?

palaѕн Over a year ago

Nothing like that, just need to include the higher version jQuery file.

user2998739 Over a year ago

I've edited my question. Can u kindly tell me why its not working?

palaѕн Over a year ago

Try to put all your jQuery code inside the $( document ).ready( handler ) method. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.

|

codingrose · Accepted Answer · 2013-11-18 07:22:17Z

0

Try this:

$('body').on('change','select[name="item_code"]',function () {
    alert($(this).val());
});

.on() attaches an event handler to the element.

edited Nov 18, 2013 at 7:22

answered Nov 18, 2013 at 7:14

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Collectives™ on Stack Overflow

Accessing dynamically created row in jquery function

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related