Two functions don't work together, but no errors

Question

I have a couple of javascript functions which:

• show/hide some table rows
• add a new row

Both work on the same page, but not under specific circumstances.

Here's the fiddle of the code below:

/*************** show/hide sections ***************/
$('.arrow').click(function(event) {
    var sec_id = $(this).attr('id').split('.')[0];  // admin.link -> admin

    if ($(this).closest('td').attr('class') == 'subtitle')
        $('.s_'+sec_id).toggle();                   // toggle hide/show for 1 item (section)
    else
        $(this).closest('tr').nextUntil('tr:not(.s_' + sec_id+')').toggle();

});

/*************** Add rows ***************/
$('.add_row').click(function(event) {
    var sid = $(this).attr('sid');                  // the id of the <tbody>
    var tbody = document.getElementById(sid);   // the <tbody> to add rows to

    // === GENERATE NEW NAMES for inputs
    // get the name of the first input in the last row
    var rows = tbody.rows;
    var rowinput = rows[rows.length-1].getElementsByTagName('INPUT');
    // split name into array
    var name_piece = rowinput[0].name.split('][');
    // create name for next row; check if last row is a blank row
    var reg = new RegExp('^[0-9]+$');
    if (reg.test(name_piece[1]))    // if integer
        var iteration = parseInt(name_piece[1], 10) + 1;    // convert to int with base 10
    else
        iteration = 1;
    if (iteration < 10)
        iteration = '0'+iteration;                  // add left padding to ensure sort order
    var front = 'items['+sid.substring(2)+']['+iteration+']';   // front of input name (remove the 's_' from name)
    // END GENERATE NEW NAMES for inputs

    // === CREATE ROW
    var row = document.createElement('tr');         // create a row
    var td1 = document.createElement('td');         // create first cell
    td1.setAttribute('colSpan', 2);
    td1.innerHTML = '<input type="text" name="'+front+'[desc]" maxlength="100" />';
    var td2 = document.createElement('td');         // create second cell
    td2.innerHTML = '<input type="text" name="'+front+'[price]" maxlength="9" onChange="calc_ttl()" class="right small" />';
    var td3 = document.createElement('td');         // create third cell
    td3.setAttribute('colSpan', 3);
    // END CREATE ROW

    // output
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    tbody.appendChild(row);
});

In the fiddle, you'll see 3 links, all of which work as they should. The only exception is if I add a row while the hidden rows are shown; eg.:

1. Click "Subsection" to show rows
2. Click "Add row"
3. Click "Subsection" to hide rows <-- Fails here

From then on, the "Subsection" link no longer works unless I reload the page. The code checks out, and Firebug reports no errors, so I'm at a loss. Any advice much appreciated.

Answer 1

The problem is not in the jQuery code you've posted here. It is in the HTML. In your fiddle you have:

<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" class="s_grp_2d_ttl_asset" style="display: none;">

Once the row is visible, as soon as the mouse moves over it, the s_grp_2d_ttl_asset class is replaced by the highlight class, which makes your click event stop at the first element. If you used the addClass, removeClass, or toggleClass functions instead, you could make the change without completely removing the original class.