Die onClick-Funktion der ersten 4 li-Elemente funktioniert, aber alle folgenden nicht - in FF 3.6 und Chrome

Question

Sorry für den verwirrenden Titel, aber das ist ungefähr das Beste, was ich beschreiben kann... Also ich habe ein TD-Element und wenn es doppelt geklickt wird eine Jquery Ajax-Funktion gibt eine ul aus einem PHP-Skript.

Neuer Code (Entschuldigung für so viel davon):

Hier ist der 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);

Hier ist ein Ausschnitt aus dem PHP-Programm:

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

Hier ist der Antworttext:

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

Und schließlich die neue Funktion, die aufgerufen wird, nachdem das UL angezeigt wurde, und die die .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);
        });  
    }

Nicht mehr so einfach, was? Nun, zuerst bemerkte ich, dass in Chrome die onclick würde nur funktionieren, wenn es wie einer der ersten 4 li's oder so geklickt wurde. Nach den ersten vier (oder so) würde nichts passieren. Dann bemerkte ich, dass FF 3.6 dasselbe tat. Ich überprüfte den IE (obwohl die Seite nicht für den IE gedacht ist) und es funktionierte. Schließlich funktioniert auch FF 4 einwandfrei.

Ich sage "oder so", denn manchmal sind es die ersten 4,5,6,7... Manchmal scheint es ein Muster zu geben, aber ich kann es nicht herausfinden. Ich würde mehr Code posten, aber es gibt eine Menge davon und ich sehe nicht den Sinn, da das Problem im Grunde mit dem obigen Antworttext auftritt.

Ich habe keine Ahnung, was ich als nächstes tun soll.

Answer 1

Eine Anregung:

Alle entfernen onClick Attribute aus den Ankern. Setzen Sie stattdessen ein ID-Attribut auf das UL-Element (z. B. list ).

Dann fügen Sie dies zu Ihrem jQuery-Code hinzu:

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

Live-Demo: http://jsfiddle.net/7Lqtn/

Answer 2

Hm Ich scheine nicht in der Lage zu sein, Ihr Problem zu replizieren (obwohl ich Firefox 3.6 nicht habe, um es zu testen).

Können Sie es hier auf JSFiddle testen: http://jsfiddle.net/rQYFW/

Ich habe es in Firefox 4, Chrome 11 und IE 9 zum Laufen gebracht.