JQuery 1.3.1 doesn't find dynamically generated rows

Question

I have just installed in the ASP.NET MVC RC2 and with that also using the JQuery 1.3.1 library.
Before I was using the 1.2.6 library.
Our application works fine under that library.
But now I have strange problem.
We have a grid view that we build up with the result of an AJAX call.
With the result returned we add new rows to a table through cloning a hidden row.

The generated HTML from the JQuery is placing extra parameters to the tags. These are in the form of JQuery12345678="null". They all have the same name. In the head of the table there is a checkbox that selects/unselects all the rows of the table. This by iterating through the rows of the table.

$("#selectAllCheckbox").click(function() {
    var checked = this.checked;
    $("#dgNewTasks tbody tr").find(':input[type="checkbox"]').each(function() {
        this.checked = checked;
    });
});

Now by using the new library the check box are no longer set. I have used IE Developer Tools to check the HTML. If I remove the JQuery12345678="null" parameter from my rows. It works fine.

Could someone tell me what I have to do?

Answer 1

Can you please give an example of the relevant html snippet?

Mozilla Firefox provides a JavaScript error console, please have a look if there are any errors/exceptions by firing the event.

Answer 2

We need to see your HTML. That might illuminate the problem. In the meantime, your code can be greatly simplified:

$("#selectAllCheckbox").click(function() {
    var checked = this.checked;
    $("#dgNewTasks tbody tr :checkbox").attr("checked", checked);
});

Answer 3

@cletus, indeed your peace of code works. But I need to use the each on it. This for other functions I have. Where I have to do other stuf.

Some more code:

My HTML

 <table id="dgTasks" cellpadding="0" cellspacing="0" class="FullWidthWideContent">
     <thead>
      <tr>
       <th class="checkBox">
    <input type="checkbox" id="chkCheckAll" class="checkBox" />
       </th>
       <th><a href="#" id="ColorCodeBackGround" class="th">Prio</a></th>
       <th><a href="#" id="VisitDate" class="th">Bezoek</a></th>
       <th><a href="#" id="PartyCaseCode" class="th">Dossier</a></th>
      </tr>
  </thead>
  <tbody>
      <tr id="TemplateTr" class="hidden">
       <td class="checkBox">
    <input type="checkbox" name="chkSelectRow" class="checkBox" />
              </td>
       <td>&nbsp;</td>
       <td>&nbsp;</td>        
      </tr>
  </tbody>
 </table>

My function call:

      $(document).ready(function() {
         $("#chkCheckAll").selectAllCheckboxesIn("#dgTasks tbody tr");

         LoadGrid("", false);

         function LoadGrid(SortName, SortDescending) {

            var jTest = $.getJSON("<%=Html.ActionUrlCed("Taskbasket","GetCedTaskListItemList") %>", { sortDescending: SortDescending }, function(data) {

            CreateGrid(data);

        });
      });

In a seperate JS file:

selectAllCheckboxesIn = function(selector) {
    $(this).click(function() {
        var checked = this.checked;

        $(selector + " :checkbox").each(function() {
            $(this).checked = checked;
        });
    });
};

I have a JSON call that returns a list of items. With that list I do the following.

    function CreateGrid(data) {

        var newRow = $('#TemplateTr').clone();
        newRow.attr("class", "");

        //Remove all rows first
        $("#dgTasks tbody").find("tr:gt(0)").remove();

        $.each(data, function(i, entity) {

            CreateGridRow(newRow.clone(), entity);
        });


        $("#dgTasks tbody").find("tr:gt(0):odd").attr("class", "odd");
    }

The CreateGridRowFunction

    function CreateGridRow(row, entity) {
        if(entity.OverDue){
            row.css("background-color","#FF0000");
        }
        row.find("td:eq(0)").find(':input[type="checkbox"]').attr("id", entity.TaskCode);
        row.find("td:eq(1)").css("background-color","#" + entity.Priority);
        row.find("td:eq(2)").text(entity.Visit);
        row.find("td:eq(3) a").attr("href", "<%=Html.ActionUrlCed("Case","CaseDetail?taskCode=") %>" + entity.TaskCode);
        row.find("td:eq(3) a").text(entity.PartyCaseCode);
        row.find("td:eq(4)").text(entity.Activity);
        row.find("td:eq(5)").text(entity.LicensePlate);
        row.find("td:eq(6)").text(entity.Brand);
        row.find("td:eq(7)").text(entity.DIB);
        row.find("td:eq(8)").text(entity.PartyName);
        row.find("td:eq(9)").text(entity.Zipcode);
        row.find("td:eq(10)").text(entity.Subreports);
        row.find("td:eq(11)").text(entity.Attachments);
        row.find("td:eq(12)").text(entity.MessageTypeOfLastMsgFromAssigner);
        row.find("td:eq(13)").text(entity.Date);
        row.find("td:eq(14)").text(entity.ActionDate);


        $('#dgTasks').append(row);
    }

So if I press the chkCheckAll checkbox it should execute the function. But for some reason it doesn't do that.

tx for the replies Steve

Answer 4

I have a similar problem:

I have a button that fill a div with a form to submit a new serie, then i try to catch the event click of the new generated button but i can't, this is my code:

$('#btnSerie').click(function(){
$("#formus").html('<form name="frmserie" id="frmserie"><b>Título de la Serie:</b><br /><input type="text" id="titulo" name="titulo" /><br /><input type="button" name="btnNSerie" id="btnNSerie" value="Guardar Serie" /></form>');

        }) });

$('#btnNSerie').click(function(){
   alert("clicked");
});

Is obvius that there is a button called btnSerie, and a div called formus. Thanks.

Answer 5

this does not work because you attach the event handler (for example click()) in the ready() event handler and at this moment there is no any dynamically created rows. so, attach the click() or any other event handlers to the dynamically created rows after they have been created

Answer 6

It sounds like you need to use the .live instead of .click:

$("#selectAllCheckbox").live(function() {
    var checked = this.checked;
    $("#dgNewTasks tbody tr").find(':input[type="checkbox"]').each(function() {
        this.checked = checked;
    });
});