0

1行で始まるテーブルがあります。テーブルの最初のセルには、プラス記号のイメージがあります。クリックすると、jQuery 関数が呼び出され、テーブルに新しい行が追加されます。まず、最初の行にプラス記号を含む div を削除してから、新しい行を挿入します。新しい行には、最初のセルにプラス記号があります。ただし、2 行目のプラス記号をクリックしても何も起こりません。

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 が削除されていることも確認しました。したがって、「add_row」のIDを持つ画像の最初のインスタンスへの参照がまだあり、2行目の新しいインスタンスを認識していないと考えています。

問題は、それを回避する方法がわからないことです。

どんな助けでも大歓迎です。

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>を監視するようにテーブルに指示しています。clickadd_row

于 2012-09-27T23:05:29.983 に答える