jQuery()를 사용하여 목록을 AJAX로 업데이트하십시오.

Question

jQuery를 사용하여 AJAX로 항목을 편집하고 업데이트하려고합니다.

HTML

<ul> 
    <li data-id="1"> 
     <span class="title">Title 1</span><span><a href="#" class="changeLink">Change</a></span> 
    </li> 
    <li data-id="2"> 
     <span class="title">Title 2</span><span><a href="#" class="changeLink">Change</a></span> 
    </li> 
    <li data-id="3"> 
     <span class="title">Title 3</span><span><a href="#" class="changeLink">Change</a></span> 
    </li> 
</ul> 

jQuery를

$('a.changeLink').on('click', function(e) 
{ 
    e.preventDefault(); 
    // get parent LI element 
    var li = $(this).closest('li'); 
    // catch current title 
    var title = li.children('span.title').text(); 
    // replace span 
    li.children('span.title').html('<input type="text" value="'+title+'" />'); 
    // change the link class and label 
    $(this).removeClass('changeLink').addClass('saveLink').text('Save'); 
}); 

$('a.saveLink').on('click', function(e) 
{ 
    e.preventDefault(); 
    // get parent LI element 
    var li = $(this).closest('li'); 
    // get the id for the AJAX query 
    var id = li.attr('data-id'); 
    // get the input value 
    var title = li.children('span.title input').val(); 
    // restore span text with new 
    li.children('span.title').text(title); 
    // restore link 
    $(this).removeClass('saveLink').addClass('changeLink').text('Change'); 
    // make AJAX post to save new title 
    $.post('updatetitle.php',{ 'id': id, 'title': title }, function(){ alert('OK'); }); 
}); 

내 문제는 saveLink 클릭 이벤트가 발생하지 않았다는 것 같다. 또한 changeLink 클릭 이벤트가 두 번 이상 발생하는 것 같습니다. 왜 이런 일이 발생합니까? 링크에 더 이상 changeLink 클래스가 없습니다.

나는이 여기 jsFiddle에 넣어 : http://jsfiddle.net/jtheman/SZk4h/1/

다행 내가 어떤 입력을 얻을 수 있다면, 내 오류가 무엇입니까?

Answer 1

이벤트 요소에 연결하지 특히 ​​클래스하는 것입니다 ..

을 요하는 경우 u는

$('ul#list').on('click', 'a.changeLink , a.saveLink', function(e) { 
    e.preventDefault(); 
    if ($(this).hasClass('changeLink')) { 
     var li = $(this).closest('li'); 
     var title = li.children('span.title').text(); 
     li.children('span.title') 
      .html('<input type="text" value="' + title + '" />'); 
     $(this).removeClass('changeLink') 
       .addClass('saveLink').text('Save'); 
    } 
    else if ($(this).hasClass('saveLink')) { 
     var li = $(this).closest('li'); 
     var id = li.attr('data-id'); 
     var title = li.children('span.title').find('input').val(); 
     li.children('span.title').text(title); 
     $(this).removeClass('saveLink') 
       .addClass('changeLink').text('Change'); 
     //$.post('updatetitle.php', 
     // { 'id': id, 'title': title }, function(){ alert('OK'); }); 
    } 
});​ 

귀하의 문제가이 라인

var title = li.children('span.title input').val(); 

.children()에만 얻을 것이다 직계 자식이었다 당신이 위임 경우

업데이트 된 코드에해야 할 수도 있습니다 클래스와 함께 작업 할 요소의

내가) (라이브가 사용되지 않는 기능입니다 및에 의해 대체되어야 함을 읽을

var title = li.children('span.title').find('input').val(); 

Check Updated Fiddle

Answer 2

.live()을 대신 사용하십시오. 그 이유

$ ('a.saveLink').이 아닌 요소가 존재하는이 순간에 // (기능 (e)를 '클릭')에

.addClass ('saveLink') // 다음에 실행

Answer 3

.saveLink은 처음 이벤트를 바인딩 할 때 DOM에 없습니다. 한 가지 가능한 해결 방법은 .saveLink 클래스가 추가 된 후에 바인딩하는 것입니다. 또 다른 방법은 위임을 사용하는 것입니다. 이상적으로, ul가 id 특성이있는 것이다 (그렇지 않으면 당신은 document 또 다른 부모까지 사용해야 할 것이다. 또한

$("#ul-id").on('click', '.saveLink', function() { ... 

을의 .changeLink 콜백은 원래이 해결 될 수있는 바인딩 된 링크에서 결코 언 바운드입니다 같은 방법으로 위임을 사용하거나 콜백에서 이벤트를 바인딩을 해제 할 수 있습니다.