CODEWITHSUNDEEP
jquery
IMZvonko
IMZvonko

Reputation: 9

Element inserted with script isn't recognized by jQuery click function

I have a table that starts out with one row. The first cell of table has an image of a plus sign. When it's clicked, it invokes a jQuery function to append a new row to the table. It first deletes the div containing the plus sign in the first row then inserts the new row. The new row has the plus sign in the first cell. However when I click on the plus sign on the second row, nothing happens.

Here's what the html looks like:

<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>

Here's what the script code looks like:

$("#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);
}

I've checked the html generated by the addMember function and it is identical to the html of the original row. I've also verified that the div in the first row was removed. So I'm thinking that somehow there is still some reference to the first instance of the image with id of "add_row" and isn't recognizing the new one on the 2nd row.

Problem is, I have no idea how to get around it.

Any help would be greatly appreciated.

Upvotes: 0

Views: 69

Answers (2)

Sushanth --
Sushanth --

Reputation: 55750

You need to either delegate the event or Attach the event after the tr is inserted on your body..

Also id in the HTML should be unique. Try using a Class name Instead

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

As having Identical ID's is not a correct way.. Try using a class instead..

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

Upvotes: 1

moonwave99
moonwave99

Reputation: 22820

First, you can't use the same id attribute on more elements - convert them into classes.

<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>

Then you'll have to use .on() method:

$("#yourTableId td").on('click', '.add_row', (function() {
    addMember();
});

You are telling your table's <td>s to watch for click event on elements having add_row class, no matter if they were added later.

Upvotes: 0

Related Questions