Question

我有一个以一行开头的表。表格的第一个单元格有一个加号图像。单击它时，它会调用jQuery函数向表中追加一个新行。它首先删除包含第一行中加号的div，然后插入新行。新行在第一个单元格中有加号。但是当我点击第二行的加号时，没有任何反应。

这是html的样子：

<td><div id="plus_sign">&nbsp;&nbsp;<img id="add_row" alt="Add Group Member" src="http://localhost/jet/assets/images/green-plus-sign-tiny.png"></div>&nbsp;&nbsp;</td>

这是脚本代码的样子：

$("#add_row").click(function() {
    addMember();
});
function addMember() {  
    var baseurl = "<?php print base_url(); ?>"; 
    var $counter = parseInt($("#rowCounter").val());
    if ($counter > 1) {
        var $firstName = "#firstName"+$counter;
        var $lastName = "#lastName"+$counter;
        var $email = "#email"+$counter;
        if ($($firstName).val() == "" && $($lastName).val() == "" && $($email).val() == "") {
            alert("You must fill out member row before adding another!");
            return false;
        }
    }
    $memberRowNum = $counter;
    $('#plus_sign').remove();
  $counter+=1;
  var $appendVal = '<tr><td><div id="plus_sign" valign="bottom">&nbsp;&nbsp;<img id="add_row" alt="Add Group Member" src="';
  $appendVal += baseurl;
  $appendVal += 'assets/images/green-plus-sign-tiny.png" /></div>&nbsp;&nbsp;</td>';
  $appendVal += '<td>'+$memberRowNum+'<input type="hidden" name="volID'+$counter+'" id="volID'+$counter+'"></td>';
  $appendVal += '<td><input type="text" name="firstName~~" id="firstName~~" size="15" ></td>';
    $appendVal += '<td><input type="text" name="lastName~~" id="lastName~~" size="20" ></td>';
    $appendVal += '<td><input type="text" name="email~~" id="email~~" size="25" ></td>';
    $appendVal += '<td><select name="grade~~" id="grade~~"><option value="">Not a Student</option><option value="13">College</option></option><option value="12">12th</option><option value="11">11th</option><option value="10">10th</option><option value="9">9th</option><option value="8">8th</option><option value="7">7th</option><option value="6">6th</option><option value="5">5th</option><option value="4">4th</option><option value="3">3rd</option></select></td>';
    $appendVal += '<td align="center"><input type="checkbox" name="expBoard~~" id="expBoard~~" value="1" /></td>';
    $appendVal += '<td align="center"><input type="checkbox" name="expBook~~" id="expBook~~" value="1" /></td>';
  $appendVal += '</tr>';
    $appendVal = $appendVal.replace(/~~/g,$counter);        
    $appendVal = $appendVal.replace(/@@/g,"?");     
    $(".groupMembers > tbody:last").append($appendVal);
    $("#rowCounter").val($counter);
}

我已经检查了addMember函数生成的html，它与原始行的html相同。我还验证了第一行中的div被删除了。所以我想，不知怎的，仍然有一些参考图像的第一个实例，其id为“add_row”，并且没有识别第二行的新图像。

问题是，我不知道如何绕过它。

非常感谢任何帮助。

Answer 1

您需要委派活动或在您的身体上插入 tr 后附加活动。

HTML中的 id 也应该是唯一的。请尝试使用类名称

$('table').on('click' , '#add_row' , function(){
     addMember();
});

由于具有相同的ID不是正确的方法..尝试使用类而不是..

$('table').on('click' , '.add_row' , function(){
         addMember();
    });

Answer 2

首先，您不能在更多元素上使用相同的id属性 - 将它们转换为类。

<td><div class="plus_sign">&nbsp;&nbsp;<img class="add_row" alt="Add Group Member" src="http://localhost/jet/assets/images/green-plus-sign-tiny.png"></div>&nbsp;&nbsp;</td>

然后你必须使用.on()方法：

$("#yourTableId td").on('click', '.add_row', (function() {
    addMember();
});

您告诉您的表格<td>要查看click类别的元素add_row事件，无论它们是否稍后添加。

jQuery单击功能无法识别用脚本插入的元素

2 个答案: