xajax.addAppend.javascript.dom - проблема с DOm/js после addAppend

[horal]

xajax.addAppend.javascript.dom - проблема с DOm/js после addAppend

Есть список div-элементов

 <div id="categories">

           <div id="item_1">
                        <div id="child">  ..... </div>
           </div>
                   .....

           <div id="item_N">
                        <div id="child">  ..... </div>
           </div>

</div>

на каждом таком элементе висит JS-функция, которая меняет innnerHTML


через xajax / php / smarty добавляю с помощью

$objResponse->addAppend("categories","innerHTML",$category);

элемент

           <div id="item_N">
                        <div id="child">  ..... </div>
           </div>

к categories

После этого, все JS-функции, привязанные к item_1, ..., itemN не работают ( там editInPlace is used )

почему так происходит? Это такая фишка xajax?

видимо это как-то связано с модификацией dom-дерева.

заранее благодарю за ответ

 

[algo]

а что за функция-то? ее нет в примере.

На каком этапе она добавляется?
Что ее добавляет ?

 

[horal]

вот такое там используется:


то есть, по событию onLoad вызывается функция

EditInPlace.makeEditable, которая делает элемент редактируемым.

То есть, можно кликнуть по эелементу и отредактировать его заголовок.

и сохранить без перезагрузки.

   <script language='javascript'>
              Event.observe(window, 'load', init, false);          
          function init() {
               // Over ride some of the default options.
               EditInPlace.defaults['type'] = 'text';
               EditInPlace.defaults['save_url'] = 'http://".BASE_HTTP_HOST."/admin/editCategory/';";
    
    foreach ($list as $item)
    {
       $news_edit_js .= " EditInPlace.makeEditable({ id: 'cat_".$item['cat_id']."',ajax_data:{db_id:{$item['cat_id']},type:'cat' }}); ";
       $news_edit_js .= " EditInPlace.makeEditable({ id: 'trans_".$item['cat_id']."',ajax_data:{db_id:{$item['cat_id']},type:'trans' }});";
    }
    
    $news_edit_js .=" } </script>";

данные элементы - это список <div>, описанных выше.

добавляем новый элемент:

    <div id="item_N">
                        <div id="child">  ..... </div>
           </div>

а
$objResponse->addScript("EditInPlace.makeEditable({ id: 'trans_".$item['cat_id']."',ajax_data:{db_id:{$item['cat_id']},type:'trans' }})");


получаем html добавляемого элемента.

$category=$this->_page->Template->getContents('admin/news/news.category.item.tpl');

добавляем элемент на страницу

$objResponse->addAppend("categories","innerHTML",$category);

 

[algo]

видимо где-то срезаются обработчики события или атрибуты.

Обработчик события НЕ копируется при cloneNode, например.

Проверь через Firebug, что происходит.

 

[RoLex]

Автор оригинала: horal

$objResponse->addAppend("categories","innerHTML",$category);

1. что у тебя получается в переменной $category? то есть какой код html?

если я правильно понял, такой:

<div id="item_N">
                        <div id="child">  ..... </div>
           </div>

ты уверен, что id="item_N" у тебя на всей странице уникальны?

2. для чего у тебя <div id="child"> ? он клик у них прописан или у предка <div id="item_N"> ?

3. не раз уже писал о том, что id на то и id что он должен быть уникальным на всей странице.

 

[horal]

спасибо за интерес!

вот код:

  <div id="tr_{$item.cat_id}" class="na_container" style="float:left;margin-top:20px;">

  <div id="delete_{$item.cat_id}"   style="float:left;padding-right:25px;"><img src="/images/delete.gif" border="0"  title="удалить" onclick="deleteCategory({$item.cat_id},'')">
</div>

 <div id="cat_{$item.cat_id}" title="Щелкните мышью для редактирования"  style="width:200px;float:left;">{$item.cat_name}
</div>

   <div id="trans_{$item.cat_id}" title="Щелкните мышью для редактирования" style="width:200px;float:left;">{$item.cat_translit|default:"alias"}
   </div>
</div>

onclick висит на <div id="delete_{$item.cat_id}" - удаление - оно работает после добавления

а также тут: id="cat_{$item.cat_id}" - редактирование InnerHTML

все id уникальны, т.к. это PrimaryKey

да дело не в id

функции добавляются в момент onload - динамиски, может в этом проблема.

после добавления дового <div> как будто не добавлял никаких функций.

 

[RoLex]

хм...
если что-то не срабатывает как ожидаешь, советую реализовать все это на чистом html + js
то есть,
создай страницу.
пропиши в ней один, два дива предка.
укажи им нужные события onXXX, если надо.
добавть на стр нужные функции js (на "простом" js, без ajax)
и реализуй то что тебе нужно, добавление (append...) node, удаление, редактирование. ну в обще что ты хотел.
на ф-ции удаления, редактирования, добавления можешь поставить на всякий случай alert("id элемента, над которым проводится действие")...

если все будет работать как тебе нужно, сравни сурс страницы этой, и той, которая у тебя формируется динамически.

 

[MiRacLe]

Который раз уже...

У вас есть элемент Q, у него имеется обработчики некоторых событий, да и вообще много чего есть.

Вы добавили элемент Z.

Почему вы думаете что у Z вдруг каким-то волшебным образом появятся такие обработчики как у Q ? Кто вам сказал что свойства Q "перебегут" к Z ?

Я надеюсь все вопросы исчерпаны.