First 4 li element's onClick work but everyone after doesn't - in FF 3.6 and Chrome

Sorry for the confusing title, but that's about the best I can describe it... So I have a TD element and when it's double clicked a jquery ajax function returns a ul from a PHP script.

New code (sorry for so much of it):

Here is the jQuery Ajax code:

    //Create PU:
    $('#DD_'+IDNum).append('<div class="popUp" id="PU_'+IDNum+'"></div>');

    //ajax:
    $.ajaxSetup ({
        cache: false
    });
    var ajax_load = '<img class="loading" id="LG_'+IDNum+'" src="../images/loading.gif" />';
    if(key==0)
        var term = '';
    else
        var term = $('#TC_'+IDNum).val();
    //load() functions
    var loadUrl = "./ddGet.php?Ele="+element+"&Client="+ClientID+"&vendorName="+vendorName+"&id="+IDNum+"&term="+term;
    $('#PU_'+IDNum+'').html(ajax_load).load(loadUrl);

Here is a snippet of the PHP:

$result = mysql_query($query) or die(mysql_error());
$response= '<ul id="DD_UL">';
$resultArray = array();
$class = "li-odd";
$i = 1;
while($row = mysql_fetch_array($result))
{
    if(!in_array($row[0], $resultArray)){
    $resultArray[]=$row[0];
    if(isset($row[1]))
        $roW1 = ' - '.$row[1];
    else
        $roW1 = '';
    $response .= "\n".'<li id="LI_'.$id.'_'.$i.'" class="'.$class.'">'.$row[0].$roW1.'</li>';
    //selectLI(\'LI_'.$id.'_'.$i.'\')
    if($class == "li-odd")
        $class = "li-even";
    else
        $class = "li-odd";
    $i++;
    }
}
$response .= '</ul>';
echo $response;

Here is the response text:

<ul id="DD_UL">
<li id="LI_1_1_1" class="li-odd">E02_02</li>
<li id="LI_1_1_2" class="li-even">E02_03</li>
<li id="LI_1_1_3" class="li-odd">E02_04</li>
<li id="LI_1_1_4" class="li-even">E02_05</li>
<li id="LI_1_1_5" class="li-odd">E02_06</li>
<li id="LI_1_1_6" class="li-even">E02_07</li>
<li id="LI_1_1_7" class="li-odd">E02_08</li>
<li id="LI_1_1_8" class="li-even">E02_09</li>
<li id="LI_1_1_9" class="li-odd">E02_10</li>
<li id="LI_1_1_10" class="li-even">E02_11</li>
<li id="LI_1_1_11" class="li-odd">E02_13</li>
<li id="LI_1_1_12" class="li-even">E02_14</li>
<li id="LI_1_1_13" class="li-odd">E02_20</li>
</ul>

And finally the new function that is called after the UL is displayed that assigns the .live:

function selectLI(){
        $('#DD_UL').live('click',function(e){
        var id = e.target
        id = $(id).attr('id');
        var IDNum = id.substr(3);
        IDNum = IDNum.substring(0,IDNum.lastIndexOf("_"));
        var newVal = $('#'+id).html();
        if(newVal.indexOf(" - ")>0)
            newVal = newVal.substring(0, newVal.indexOf(" - "));
        $('#TC_'+IDNum).val(newVal);
        });  
    }

Not so simple anymore, huh? Well first I noticed that in Chrome the onclick would only work if it was like one of the first 4 li's or so clicked. After the first four (or so) nothing would happen. I then noticed that FF 3.6 was doing the same thing. I check IE (alth开发者_JAVA技巧ough the page is not meant to be run in IE) and it worked. Finally FF 4 works fine as well.

I say "or so" because sometimes it's the first 4,5,6,7... Sometimes there appears to be a pattern but I can't figure it out. I would post more code, however there is a lot of it and I don't see the point since the issue is basically occurring with the above response text.

I have no idea what to do next.

A suggestion:

Remove all onClick attributes from the anchors. Instead, set an ID attribute on the UL element (for instance list).

Then, add this to your jQuery code:

$('#list').live('click', function(e) {
    var anchor = e.target;
    // do stuff with your anchor
});

Live demo: http://jsfiddle.net/7Lqtn/

Hm.. I don't seem to be able to replicate your problem (though I don't have Firefox 3.6 to test it in).

Can you test it here on JSFiddle: http://jsfiddle.net/rQYFW/

I've gotten it to work fine in Firefox 4, Chrome 11, IE 9.