DEMO

Question

首次打开时，消息中会显示所选消息。按“添加”按钮时，不会显示新消息。有什么问题

从右侧列表中选择一条消息正在键入消息。当我在列表中选择一条消息时，添加第二次推送消息

HTML

<table class="color"  cellpadding="2" cellspacing="2" id="myTable">
    <tr class="user">
        <td >
            <select name="a" id="selectMe">
                <option value="" selected></option>
                <option value="1">Message</option>
                <option value="2">Not Message</option>
            </select>
        </td>

        <td id="group">
            Message</td>
    </tr>

    <tfoot>
        <tr>
            <td colspan="5" style="text-align: left;">
                <input type="button" id="addrow" value="Add Rows" />
            </td>
        </tr>

    </tfoot>
</table>

CSS

<style>
#group {
    display: none;
    padding: 10px;
    border: 1px solid #ddd
}
</style>

JS

$(document).ready(function () {
            var counter = 0;

            $("#addrow").on("click", function () {

                counter = $('#myTable tr').length - 2;

                var newRow = $("<tr>");
                var cols = "";

                cols += '<td><select id="selectMe" name="a" ><option value="" ></option><option value="1" >Message</option><option value="2">Not Message </option></select></td><td id="group">mesage<</td>';

                cols += '<td><input type="button"  value="x" ></td>';
                newRow.append(cols);
                if (counter == 4) $('#addrow').attr('disabled', true).prop('value', "You've reached the limit");
                $("table.color").append(newRow);
                counter++;
            });




            $("table.color").on("click", ".buttons", function (event) {
                $(this).closest("tr").remove();
                calculateGrandTotal();

                counter -= 1
                $('#addrow').attr('disabled', false).prop('value', "Add Rows");
            });


        });




$('.user').each(function(){
    var parent = this,
        group = $('#group', parent);
    $('#selectMe', parent).on('change', function(){
        var indis = $(':selected', this).index();
        if ( indis > 0 ){
            indis -= 1;
            group.hide().filter(':eq(' + indis + ')').fadeIn(300);
        } else {
            group.hide();
        }
    });
});

我想要什么。当我按下添加按钮也给新帖子

Answer 1

您需要委派click事件并指定目标输入类型（button）：

    $("table.color").on("click", "input[type='button']", function (event) {
        $(this).closest("tr").remove();
        calculateGrandTotal();

        counter -= 1
        $('#addrow').attr('disabled', false).prop('value', "Add Rows");
    });

DEMO

Answer 2

您的$(".user").each()循环仅对首次加载页面时存在的元素进行操作。稍后使用添加按钮添加的DIV不会被处理，因此永远不会添加change处理程序。

要对动态添加的元素实现事件绑定，必须使用委派。此外，您不应该为元素提供相同的ID，您应该使用类相似的元素。因此，请在HTML中将id="selectMe"和id="group"更改为class="selectMe"和class="group"，然后将CSS更改为使用.group。点击处理程序然后变为：

$('.color').on('change', '.selectMe', function () {
    var group = $(this).closest("td").siblings(".group");
    var indis = $(':selected', this).index();
    if (indis > 0) {
        indis -= 1;
        group.hide().filter(':eq(' + indis + ')').fadeIn(300);
    } else {
        group.hide();
    }
});

DEMO

添加到单元格时出错并且无法正常工作

2 个答案:

DEMO