Почему не срабатывает js событие?

Question

[Turik-us]

есть таблица

<table class="responsive table table-bordered">
                      <thead>
                        <tr>
                          <th>id</th>
                          <th>Категория</th>
                          <th>Редактирование</th>
                        </tr>
                      </thead>
                      <tbody id="org_cats_child"> 
                        <?
                        foreach ($cats_child as $cat) {
                          ?>
                            <tr id="Enum<?=$cat['Ccategory']['id'];?>">
                              <td attr="child"><?=$cat['Ccategory']['id'];?></td>
                              <td class="name"><?=$cat['Ccategory']['name'];?></td>
                              <td>
                                <a href="" id="edit_org_cat">Редактировать</a> |
                                <a href="" id="delete_org_cat">Удалить</a>
                              </td>
                            </tr>
                          <?
                        }
                        ?>
                      </tbody>
                    </table>

и есть js код:

$('a#edit_org_cat').on('click',function(){
        var id = $(this).parent().parent().find('td:first').html();
        var at = $(this).parent().parent().find('td:first').attr('attr');
            $.get('/admin/org_cat_edit/'+id,{},function(data){
                if(data.indexOf('fls') + 1) {
                    alert('Ошибка!');
                }else{
                    if ( at == 'child'){
                        $('#editform2').find('#formedit').html(data);                        
                        $('#editform2').show(400);
                    }else{
                        $('#editform').find('#formedit').html(data);                        
                        $('#editform').show(400);
                    }
                }
            });
        return false;
    });

все работает отлично, при клике по ссылкам отправляется запрос.
есть еще select, где выберем категорию родитель, после чего делается этот запрос

$('select[id=parentcat]').on('change',function(){
        var id = $(this).val(); 
        var el = '';
        $.getJSON('/admin/jsongetcatschild/'+id,{},function(data){
            $('#org_cats_child').html('');
            $.each(data,function(i,val){
                el  = '<tr id="Enum'+val['Ccategory']['id']+'">';
                el += '  <td attr="child">'+val['Ccategory']['id']+'</td>';
                el += '  <td class="name">'+val['Ccategory']['name']+'</td>';
                el += '  <td>';
                el += '    <a href="" id="edit_org_cat">Редактировать</a> |';
                el += '    <a href="" id="delete_org_cat">Удалить</a>';
                el += '  </td>';
                el += '</tr>';
                $('#org_cats_child').append(el);
            });
        });
    });

после это при нажатии на ссылки событие не срабатывает.
как решить эту проблему?

Comments

[vdem]

При нажатии на КАКИЕ ссылки событие не срабатывает? Если Вы про "Редактировать" и "Удалить", то на них я не вижу никаких обработчиков.

[Turik-us]

не тот код вставил

Answer 1

[vdem]

1. Проблема в том, что Вы вешаете обработчик на ссылки, которые потом удаляете через .html(''), и после этого ожидаете, что НОВЫЕ вставленные ссылки почему-то будут вызывать тот же обработчик, который был повешен на удаленные. Нужно вешать обработчик на table, но при это указывать, что вызываться он будет только при клике на определенный элемент:

$('table').on('click', 'a.edit_org_cat', function() {
    // ...
}

2. Вторая проблема: HTML DOM может себя вести непредсказуемо, если в коде несколько элементов с одним id. Так что меняйте id у ссылок на class

Comments

[Turik-us]

Спасибо! =)

[vdem]

Еще одно: лучше делайте .empty(), а не .html() - работает быстрее.

[vdem]

P.S. Конечно, я хотел написать .html('')