jQuery表追加

Question

I need help to understand what I am doing wrong. I have the following table in the loop:

<table width="100%" class="box-table-green" align="left" id="tableAppend" >
   <thead>
     <tr>
      <th align="left"><?php echo $table_name; ?></th>
      <th   align="Right"> <a href="javascript:void(0);" id="addCF"  >Add Row</a> </th>
     </tr>
   </thead>
</table>

And by click on Add Row, it will generate a row in the respective table with the help of the following Javascript code:

$('.box-table-green a').click(function (evt) {
             evt.preventDefault();


    var rowHtml = '<tr  align="center"><td><input type="text"  name="vsname[]" value="" /></td><td><input type="text" name="foreRengoring[]" id="foreRengoring" class="fieldWidthBefore80" /><img src="images/cancel_icon.png" style="float:right" width="24" height="24" class="deleteRowNew" /></td></tr>'; 

      $(this).parents('.box-table-green').append(rowHtml);
     return false;
 });

if I only leave the above Jquery code, then it appends only one row. but when I add the delete code, which is below, then it appends two rows and I don't know why.

$("#tableAppend").on('click', ".deleteRowNew", function () { 
 $(this).closest('tr').remove();
 });

I tried it with class name, and direct click on image as well. incase of direct $("img").click , it only remove the rows that are pre-loaded intot hte page. And does not work on the rows that are dynmaically created with the above Append Row code.

Need help, as I have spent a lot of time on this thing, and I'm not able to figure out what am I doing wrong.

Answer 1

Updated fiddle: http://jsfiddle.net/lotusgodkk/GCu2D/12/

You had some issues in the html and in the js. In HTML you missed the <tr> tag. In js you were appending the html which had input of same Id. Never use same ID on elements. So I removed ID attribute from Input. And the code is working as expected.

$(document).ready(function () {
$('.box-table-green a').click(function (evt) {
    evt.preventDefault();
    var rowHtml = '<tr  align="center"><td><input type="text"  name="vsname[]" value="" /></td><td><input type="text" name="foreRengoring[]" class="fieldWidthBefore80" /><img src="images/cancel_icon.png" style="float:right" width="24" height="24" class="deleteRowNew" /></td></tr>';
    $(this).parents('.box-table-green').append(rowHtml);
    return false;
});
$("#tableAppend").on('click', ".deleteRowNew", function () {
    $(this).closest('tr').remove();
  });
});

Answer 2

I couldn't figure out why my page was not working, the way it should have. But I solved my execution flow by another method. I guess can not paste the whole page here, and the code (provided here) works fine.

I don't konw how to close this question, Consider this question close. As it will be useless for some one to comment on it.

Thanks