Why is the js event not firing?

Question

JavaScript

there is a table

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

and there is js code:

$('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;
    });

Everything works fine, when you click on the links, a request is sent.
there is also select, where we select the category parent, after which this request is made

$('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);
            });
        });
    });

after that, when clicking on the links, the event does not fire.
How to solve this problem?

Answer 1

1. The problem is that you hang a handler on links that you then delete via .html(''), and after that you expect that the NEW inserted links for some reason will call the same handler that was hung on the remote ones. You need to hang the handler on the table, but at the same time indicate that it will be called only when you click on a certain element:

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

2. The second problem: HTML DOM can behave unpredictably if there are several elements with the same id in the code. So change the id of class references