이벤트 처리기가 필요할 때 클래스 문제 토글

Question

나는 편집 가능한 것으로 만들고 싶은 몇 개의 TD 요소를 가지고 있으며, 그 다음에 버튼을 클릭하면 정적으로 되돌아갑니다. 문제는 이러한 요소를 앞뒤로 전환하는 것입니다. 가능한 한 가장 쉬운 방법으로이를 어떻게 수행합니까?

편집 -> 입력 요소로 요소 바꾸기 -> 단추 정적 함수 처리기 -> 단추 클릭 -> 입력 내용을 정적 내용으로 바꾸기 -> 이벤트 처리기 추가를 클릭하면 재귀적인 것처럼 보입니다. 내가 가진 유일한 문제는 새로 생성 된 요소에 핸들러를 첨부하는 것입니다.

자바 스크립트 :

// how do I encapsulate this into its own function? Seems recursive. 
$('.edit-me').click(function(){ 
    // remove the other editable fields. 

    // For some reason the second toggle errors out. - Why? 
    makeEditable(this); 
    $(this).toggleClass('edit-me'); 
    $(this).toggleClass('static-me'); 
}); 

    // attach a handler to the newly created elements 
    $('.static-me').click(function(){ 
     // this is not working because newly created items do not have the event associated to them. 
     console.log("HERE"); 
     makeStatic(this); 
     $(this).toggleClass('edit-me'); 
     $(this).toggleClass('static-me'); 
    }); 
} 
$('.delete-me').click(function(){ 
    pair_delete(this); 
}); 
function makeEditable(obj){ 
    // replace the elements with an editable element. 
    $(obj).parent().children('td.editable').each(function(index, item){ 
     $(item).html('<input class="form-control edit-mode editing" data-field="' + $(this).attr('data-field') + '" value="' + $(this).html() + '" >'); 
     // toggle for event handling. 
     $(item).removeClass('editable'); 
     $(item).addClass('edit-mode'); 
    }); 
    $('.editing').change(function(){ 
     // create the update 
     pair_update(this); 
    }); 
} 
function makeStatic(obj){ 
    // makes the row static. 
    $(obj).parent().children('td.edit-mode').each(function(index, item){ 
     // replace with input field. 
     $(item).html('<td class="editable" data-field="'+ $(item).attr('data-field') +'">' + $(item).find('.editing').val() + '</td>'); 
     $(item).addClass('editable'); 
     $(item).removeClass('edit-mode'); 
    }); 
} 

HTML :

<td class="editable" data-field="pair_name"><?=$pair['pair_name']?></td> 
    <td class="editable" data-field="email_name"><?=$pair['email_id']?></td> 
    <td class="editable" data-field="sent_event_id"><?=$pair['sent_event_id']?></td> 
<td class="editable" data-field="minutes"><?=$pair['minutes']?></td> 
    <td class="edit-me"> 
<button type="submit" class="btn btn-primary"> 
    <i class="glyphicon glyphicon-pencil icon-white"></i> 
</button> 
</td> 

Answer 1

오히려 (는 DOM에서 새 요소에 바인딩을 해결한다) 대신 .click()의 .on('click', '.classname', function() { // do stuff here; });를 사용하여 전환을 유지하려는 경우

토글이 요소 등을 전환하는 데 지저분 해지기 때문에 다른 해결책은 토글을 사용하지 않고 시도하는 것입니다. 더 똑 바른 앞으로는 이것 일할 수 있었다 : http://jsfiddle.net/swm53ran/177/

$(document).ready(function() { 
    $('table').on('click', '.edit', function() { 
     var name = $(this).closest('tr').find('.name').html(); 
     var email = $(this).closest('tr').find('.email').html(); 
     $(this).closest('tr').find('.name').html('<input type="text" value="'+ name +'"/>'); 
     $(this).closest('tr').find('.email').html('<input type="text" value="'+ email +'"/>'); 
     $(this).closest('tr').find('.edit').closest('td').html('<a href="#" class="save">Save</a>'); 
    }); 

    $('table').on('click', '.save', function() { 
     var name = $(this).closest('tr').find('.name').find('input').val(); 
     var email = $(this).closest('tr').find('.email').find('input').val(); 
     $(this).closest('tr').find('.name').html(name); 
     $(this).closest('tr').find('.email').html(email); 
     $(this).closest('tr').find('.save').closest('td').html('<a href="#" class="edit">Edit</a>'); 
    }); 

}); 

<table> 
    <tr> 
     <td class="name">Name1</td> 
     <td class="email">Email1</td> 
     <td class="action"><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
     <td class="name">Name2</td> 
     <td class="email">Email2</td> 
     <td class="action"><a href="#" class="edit">Edit</a></td> 
    </tr> 
    <tr> 
     <td class="name">Name3</td> 
     <td class="email">Emaiil3</td> 
     <td class="action"><a href="#" class="edit">Edit</a></td> 
    </tr> 
</table>