onClick первых 4 элементов li работает, но все последующие не работают — в FF 3.6 и Chrome

#php #jquery #html #ajax #onclick

#php #jquery #HTML #ajax #onclick

Вопрос:

Извините за запутанное название, но это лучшее, что я могу описать… Итак, у меня есть элемент TD, и при двойном щелчке на нем функция jquery ajax возвращает ul из PHP-скрипта.

Новый код (извините за его большую часть):

Вот код jQuery Ajax:

     //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 "amp;Client=" ClientID "amp;vendorName=" vendorName "amp;id=" IDNum "amp;term=" term;
    $('#PU_' IDNum '').html(ajax_load).load(loadUrl);
  

Вот фрагмент 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;
  

Вот текст ответа:

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

И, наконец, отображается новая функция, вызываемая после UL, которая присваивает .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);
        });  
    }
  

Уже не так просто, да? Ну, сначала я заметил, что в Chrome onclick будет работать, только если он похож на один из первых 4 щелчков li или около того. После первых четырех (или около того) ничего не произойдет. Затем я заметил, что FF 3.6 делает то же самое. Я проверяю IE (хотя страница не предназначена для запуска в IE), и это сработало. Наконец, FF 4 также работает нормально.

Я говорю «или около того», потому что иногда это первые 4,5,6,7… Иногда кажется, что есть шаблон, но я не могу его понять. Я бы опубликовал больше кода, однако его много, и я не вижу смысла, поскольку проблема в основном возникает с приведенным выше текстом ответа.

Я понятия не имею, что делать дальше.

Комментарии:

1. CSS был бы хорош, это могут быть проблемы со стилем, из-за которых что-то выходит из строя. Возможно, создайте jsFiddle для репликации.

2. кажется, у меня работает. jsfiddle.net/maniator/pm96F (я использую chrome)

3. интересно, приведенный выше код отлично работает как скрипка.

4. @jreed Вы можете изменить этот PHP-скрипт?

5. @jreed Я бы сначала проверил консоль ошибок (на случай, если выдается ошибка)…

Ответ №1:

Предложение:

Удалите все onClick атрибуты из якорей. Вместо этого установите атрибут ID для элемента UL (например list ).

Затем добавьте это в свой код jQuery:

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

Живая демонстрация: http://jsfiddle.net/7Lqtn /

Комментарии:

1. Я думал, что это может сработать (или с использованием делегирования), потому что это было так по-другому. Но это имеет тот же эффект. Итак, я полагаю, мне нужно начать искать в другом месте, но я действительно понятия не имею, где еще искать, я обновлю свой вопрос с помощью jquery.

2. Я бы хотел, но материал состоит из конфиденциального PHI, и для очистки информации потребовалось бы слишком много времени и усилий, извините. Я опубликовал больше кода, чтобы дать вам лучшее представление о том, что здесь происходит. Спасибо за помощь — мне нравится идея использования . больше живите, поскольку это должно повысить производительность и стать намного чище.

3. @jreed Вы уверены, что ни в одном из браузеров не выдается ни одной ошибки?

Ответ №2:

Хм .. Похоже, я не могу воспроизвести вашу проблему (хотя у меня нет Firefox 3.6, чтобы протестировать ее).

Можете ли вы протестировать это здесь, на JSFiddle: http://jsfiddle.net/rQYFW /

Я заставил его нормально работать в Firefox 4, Chrome 11, IE 9.