jQuery returning two elements for each one it finds?

I'll start by saying I'm fairly new to jQuery. For the most part, I've found it intuitive and powerful, but this one circumstance has me thoroughly stumped.

In the following method, the call to .each() returns two elements for every one found. It iterates over a set of table rows given IDs starting with the word, "communication," and followed by an ID number. For each row it returns, it processes twice.

Using Firebug, I've validated that the DOM only has a single instance of each table row in question. Also using Firebug, I've validated that the method is not being called twice; the iteration in .each() is truly going over each returned table row twice. By the time all the AJAX call goodness is done, I'll have two entries in the database for each row created in the table.

This is the code that's causing the issues:

function getCommunications() {
    var list = $('[id^=communication]');
    var communications = new Array();
    list.each(function () {
        var communication = {
            ID: $(this).find('.commCompanyID').val(),
            /*
             * SNIP: more object properties here that are 
             * unnecessary to this discussion
             */
        };
        communications.push(communication);
    });
    return communications;
}

At the point of return communications, the Array returned will contain twice as many elements as there are table rows.

I should note that nearly identical code (but going against specific lists of divs) is working on the same page. It's just the table that's suffering the issues.

I'm using jQuery 1.4.1, the version which shipped with Visual Studio .NET 2010.

The table markup is fully dynamic -- that is, aside from the header row, it's dependent on data either returned at page load or created by the user via a dialog box. I'll drop in just the code for what's created at page load; again using Firebug I've validated that what I create dynamically when an end user creates a row with the dialog box matches. (This should be readable by anyone, but for the record this is an ASP.NET MVC 2.0 project.)

<table id="commTable">
    <tr>
        <th></th>
        <th>
            Date / Time
        </th>
        <th>
            Contact
        </th>
        <th>
            Type
        </th>
        <th>
            Duration
        </th>
        <th>
            Notes
        </th&g开发者_如何学编程t;
    </tr>
<% foreach (var item in Model) { %>
    <tr id="communication<%: item.ID %>">
        <td>
            <a href="#" onclick="showEditCommunicationForm(<%: item.ID %>">
                Edit</a> 
            <span class="commDeleteButton">
                <a href="#" onclick="deleteCommunication(<%: item.ID %>)">
                    Delete</a>
            </span>
        </td>
        <td>
            <span class="commDateTime"><%: item.DateTime %></span>
            <input type="hidden" class="commID" value="<%: item.ID %>" />
            <input type="hidden" class="commIsDeleted" 
                value="<%: item.IsDeleted %>" />
        </td>
        <td>
            <span class="commSourceText"><%: item.Company.CompanyName %></span>
            <input type="hidden" class="commCompanyID" 
                value="<%: item.CompanyID %>" />
        </td>
        <td>
            <%: item.CommunicationType.CommunicationTypeText %>
            <input type="hidden" class="commTypeID" 
                value="<%: item.CommunicationTypeID %>" />
        </td>
        <td>
            <span class="commDuration"><%: item.DurationMinutes %></span> 
            Minutes
        </td>
        <td>
            <span class="commNotes"><%: item.Notes %></span>
        </td>
    </tr>    
<% } %>
</table>

What does alert($('[id^=communication]').length); give you? Are you sure an ancestor of the table doesn't have an ID starting with communication?

You could use $('#commTable > tr[id^=communication]') to be extremely specific

I've two suggestions - whether they help, who knows. :)

First, use a more concise selector, i.e. $("tr[id^=communication]"). This will be much faster.

Second, consider just adding a class to your tr elements. This will also be much faster. This would entail changing:

<tr id="...">

to, e.g.

<tr id="..." class="comm-row">

That way your selector for list can be $("tr.comm-row").

It's not immediately obvious to me why you are getting duplicates, but perhaps the above suggestions will not only speed up the code but offer some insight into why duplicates are happening.

Setting up a breakpoint in the each loop may offer some insight (i.e. what does this equal on each iteration).

Hope that helps.

try

var list = $('[id^=communication]').find('td');

I don't know if this will answer your question, but i ran into a similar problem with dynamically generated tables.

I'm using the jQuery selectable UI, and made a table of images based on a status flag. However, the HTML string that I passed to jQuery to insert was something along the lines of

<img src="images/imageIwant" class="classIwant"></img>

Firefox knew what I meant, and only inserted one image tag. However, in IE (7, 8) I was seeing something like

<img ... />
</img/>

Check the HTML in the developer tools for your browser. It is possible you are inserting twice as many elements as you think.