2013-04-04 2 views
0

Я надеюсь, что кто-то может помочь мне здесь, поскольку я не могу понять это. У меня есть таблица, показывающая имена пользователей. Когда я нажимаю строку TR, она извлекает информацию с помощью запроса ajax на страницу PHP, которая получает контент из SQL и передает его в форму.jquery, не может выбрать TR после манипуляции с DOM

Когда форма обновляется и сохраняется, происходит обратное, отправляется на страницу PHP с помощью ajax, ведьма обновляет SQL.

Затем, когда обновление выполнено, я хочу, чтобы список обновил его самостоятельно, не обновляя страницу. Я получил эту работу. Он извлекает новый сохраненный контент из БД с помощью ajax/php, а затем заполняет таблицу с помощью .append.

Но проблема в том, когда таблица обновлена, невозможно больше выбрать TR в таблице.

Это Maby объяснил .. смешения

Я проверил, как DOM выглядит до и после изменения (с Coda/DOM дерева), и они похожи, по крайней мере в моих глазах:

ДО MANUPULATION:

<table id="brukere" cellpadding="8"> 
<thead> 
    <tr><td>Brukernavn</td></tr></thead> 
<tbody> 
<tr id="1" onmouseover="changebgcolor(this)" onmouseout="restorebgcolor(this)"  style="background-color: white; "> 
    <td>Name 1</td> 
</tr> 
<tr id="2" onmouseover="changebgcolor(this)" onmouseout="restorebgcolor(this)" style="background-color: white; "> 
    <td>Name 2</td> 
</tr>  
</tbody> 
</table> 

ПОСЛЕ МАНИПУЛЯЦИИ:

<table id="brukere" cellpadding="8"> 
<thead> 
    <tr><td>Brukernavn</td></tr></thead> 
<tbody> 
<tr id="1" onmouseover="changebgcolor(this)" onmouseout="restorebgcolor(this)"> 
    <td>Name 1</td> 
</tr> 
<tr id="2" onmouseover="changebgcolor(this)" onmouseout="restorebgcolor(this)"> 
    <td>Name 2</td> 
</tr> 
</tbody> 
</table> 

код я использую эту работу до того, как DOM манипулируют, чтобы выбрать TR является:

$("#brukere tr") 
     .click(function() { 

Для обновления таблицы я первый очистить TR`s:

$("#brukere").find("tr:gt(0)").remove(); 

И затем добавить, новый контент (данные) поставляется в формате HTML с PHP файла:

$("table tbody").append(data), 

ответ

4

Ну, когда вы делаете

$("#brukere").find("tr:gt(0)").remove(); 

вы удаляете tr вместе с обработчиком кликов. Таким образом, вам необходимо либо приложить новый обработчик щелчка после этого (для вновь вставленного элемента) или вам нужно использовать делегат на элементе, который не удаляется, такие как:

$("#brukere").on('click', 'tr', function() {...}); 

Это присоединит click обработчик таблицы #brukere. Однако анонимная функция выполняется только в том случае, если щелчок произошел от дочернего элемента tr. И поскольку вы никогда не удаляете таблицу, этот обработчик клика никогда не удаляется.

+0

Ага, я понимаю, что вы говорите! Как бы я отформатировал этот экземпляр того, который у меня есть? \t $ ("# brukere тр") \t .click (функция() { \t \t $ .ajax ({ – SpanTag

+0

Так же, как я показал выше: '$ ("# brukere") на ('нажмите'. 'tr', function() {$ .ajax (...);}); ' – Steve

+0

PERFECT! Желаю, чтобы я спросил раньше, спас бы мне ДНЕЙ, царапая мне голову! Большое вам спасибо :) – SpanTag