1行で始まるテーブルがあります。テーブルの最初のセルには、プラス記号のイメージがあります。クリックすると、jQuery 関数が呼び出され、テーブルに新しい行が追加されます。まず、最初の行にプラス記号を含む div を削除してから、新しい行を挿入します。新しい行には、最初のセルにプラス記号があります。ただし、2 行目のプラス記号をクリックしても何も起こりません。
html は次のようになります。
<td><div id="plus_sign"> <img id="add_row" alt="Add Group Member" src="http://localhost/jet/assets/images/green-plus-sign-tiny.png"></div> </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"> <img id="add_row" alt="Add Group Member" src="';
$appendVal += baseurl;
$appendVal += 'assets/images/green-plus-sign-tiny.png" /></div> </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 が削除されていることも確認しました。したがって、「add_row」のIDを持つ画像の最初のインスタンスへの参照がまだあり、2行目の新しいインスタンスを認識していないと考えています。
問題は、それを回避する方法がわからないことです。
どんな助けでも大歓迎です。