使用腳本插入的元素無法被jQuery識別點擊功能

我有一個表格，以一行開頭。表的第一個單元格具有加號圖像。當它被點擊時，它會調用一個jQuery函數來在表中追加一個新行。它首先刪除第一行中包含加號的div，然後插入新行。新行在第一個單元格中具有加號。但是，當我點擊第二行的加號時，沒有任何反應。使用腳本插入的元素無法被jQuery識別點擊功能

這裏的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」的圖像的第一個實例，並且不識別第二行上的新圖像。

問題是，我不知道如何解決它。

任何幫助將不勝感激。

來源

2012-09-27 IMZvonko

您需要可以委託事件或TR插在你的身體後附上事件..

而且ID在HTML應該是唯一的。嘗試使用類名而不是

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

作爲具有相同ID的不是一個正確的方式..嘗試使用類，而不是..

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

來源

2012-09-27 23:04:09

首先，你不能使用相同的屬性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> s到觀看click事件在具有add_row類，如果他們是後來添加不管元素。

來源

2012-09-27 23:05:29 moonwave99

使用腳本插入的元素無法被jQuery識別點擊功能

回答

相關問題