0

我有一张从一行开始的桌子。表格的第一个单元格有一个加号的图像。单击它时，它会调用一个 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”，并且没有识别第二行的新实例。

问题是，我不知道如何解决它。

任何帮助将不胜感激。

4

2 回答 2

1

在将tr插入身体后，您需要委托事件或附加事件。

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

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

因为拥有相同的 ID 不是正确的方法.. 尝试使用类代替..

$('table').on('click' , '.add_row' , function(){
         addMember();
    });
于 2012-09-27T23:04:09.930 回答
0

首先，您不能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，无论它们是否稍后添加。

于 2012-09-27T23:05:29.983 回答