Question

我的表包含一些选择下拉列表。最初，该表仅包含一个名为“item_code”的选择下拉列表。有一个名为“添加更多”的按钮，它将在该表中添加更多具有相同名称“item_code”的选择按钮。我想在选择下拉列表的onchange事件上使用jquery函数显示警告消息...我的问题是我能够访问jquery函数中的静态选择下拉列表，但无法访问动态选择下拉列表。 Jquery函数如下 -

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

我的html代码如下 -

<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>

以及用于添加和删除行的javascript函数在下面给出

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);
            }
        }

任何人都可以为这个问题提供解决方案

Answer 1

由于名为item_code的选择下拉列表是动态添加的，因此您需要使用event delegation来注册事件处理程序，如： -

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

其中，tableID是静态父表的ID，其中使用Add More按钮添加选择下拉列表。

Answer 2

试试这个：

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

.on()将一个事件处理程序附加到元素。

在jquery函数中访问动态创建的行

2 个答案: