Question

我有一张桌子，对于这张桌子，我有一个“加号”图标，每行我都有一个“编辑”图标。

当我按下“加号”时，它会创建另一个带有选择的tr和一个“编辑”图标。

这个“编辑”的id与行号相同，所以第一个“编辑”图标的id = 1，第二个id = 2，依此类推（我正在使用i ++））。

我的问题是，当我按下“编辑”图标时，我想在控制台中显示图标的ID（测试porpouse），但这只适用于第一个图标。

我在另一个问题中看到，如果你在更多元素上拥有相同的id，就会发生这种情况，但我没有。代码是这样的：

主表，只有一行：

<table id="dynamic">
            <tr id="row1">
                <td>
                    <select class="form-control select-table" name="products[]" id="select-1" data-dep="">
                        <?php foreach($products as $product):?>
                            <option value="<?php echo $product['products_id'];?>"><?php echo $product['product_name'];?></option>
                        <?php endforeach;?>
                    </select>
                    <i id="1" data-toggle="modal" data-target="#editModal" class="fas fa-edit fa-lg edit-div"></i>
                    <div id="plus-div"><span><i class="fas fa-plus fa-lg"></i></span></div>
                </td>
            </tr>
        </table>

我添加新行的jquery代码：

var i = 1;
    $('#plus-div').click(function(){
        i++;
        j++;
        $('#dynamic').append('<tr id="row'+i+'"><td><select  id="select-'+i+'" class="form-control select-table" name="products[]">' +
            <?php foreach ($products as $product):?>'<option value="<?php echo $product['products_id'];?>"><?php echo $product['product_name'];?></option>' +
            <?php endforeach; ?>
            '</select><i id="' + i + '" data-toggle="modal" data-target="#editModal" class="fas fa-edit fa-lg edit-div"></i></td></tr>');
    });

我在jquery代码中显示id：

$('.edit-div').click(function(){
        console.log((this).id);
    });

Answer 1

这是因为当不存在id为2的元素时，您正在页面加载时设置click事件处理程序。换句话说，您使用的是等效的

$('#dynamic').on('click', function(){
    console.log((this).id);
});

你需要使用＆＃34; live＆＃34;将处理程序附加到父元素的重载（动态看起来是一个不错的选项）但限制.edit-div元素：

$('#dynamic').on('click', '.edit-div', function(){
    console.log((this).id);
});

有关详细说明，请参阅the jQuery docs。

Answer 2

这是一个代码。哪个工作正常。

JS

var i = 1;
    $('#plus-div').click(function(){
        i++;
        $('#dynamic').append('<tr id="row'+i+'"><td><select  id="select-'+i+'" class="form-control select-table" name="products[]">' +
            '</select><i id="' + i + '" data-toggle="modal" data-target="#editModal" class="edit-div">edit</i></td></tr>');
    });

    $(document).on("click",'.edit-div',function(){
        alert(this.id);
    });

PHP

<table id="dynamic">
            <tr id="row1">
                <td>
                    <select class="form-control select-table" name="products[]" id="select-1" data-dep="">

                    </select>
                    <i id="1" data-toggle="modal" data-target="#editModal" class="edit-div">Edit</i>
                    <div id="plus-div"><span>plus</span></div>
                </td>
            </tr>
        </table>

我已将PHP删除为fiddle

Answer 3

使用bind和unbind事件来设置所有元素的点击事件

var i = 1;
$('#plus-div').click(function () {
    $('.edit-div').unbind("click", editClickHandler);
    i++;
    j++;
    $('#dynamic').append('<tr id="row' + i + '"><td><select  id="select-' + i + '" class="form-control select-table" name="products[]">' +
        <?php foreach ($products as $product):?>
        '<option value="<?php echo $product['
        products_id '];?>"><?php echo $product['
        product_name '];?></option>' +
        <?php endforeach; ?>
        '</select><i id="' + i + '" data-toggle="modal" data-target="#editModal" class="fas fa-edit fa-lg edit-div"></i></td></tr>');
    $('.edit-div').bind("click", editClickHandler);
});

$('.edit-div').bind("click", editClickHandler);

function editClickHandler(e) {
    console.log((this).id);
}

Jquery返回相同的id，但我不在两个元素上使用相同的id

3 个答案:

JS

PHP