jQuery點擊（）更新列表與AJAX

我試圖製作一個項目列表可編輯和使用jQuery AJAX更新。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 click事件似乎不止一次發生。爲什麼會發生這種情況 - 該鏈接不再有changeLink類了？

我把這個在這裏的jsfiddle：http://jsfiddle.net/jtheman/SZk4h/1/

很高興，如果我能得到一些輸入，什麼是我的錯誤？

來源

2012-11-27 jtheman

本次活動將關聯到的元素，並沒有具體的一類 ..

如果喲ü要帶班去解決它，你可能需要委託事件

更新的代碼

$('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

來源

2012-11-27 22:21:32

太好了，這解決了我的第一個問題。但爲什麼changeLink事件不止一次點擊鏈接？看到這個：http://jsfiddle.net/jtheman/SZk4h/10/ – jtheman

也title = li.children（'span.title input'）。val（）;返回undefined - 爲什麼？ – jtheman

@jtheman ..檢查更新後 –

改爲使用.live()。這是因爲

$（ 'a.saveLink'）。在（ '點擊'，功能（E））//在這一刻不存在的元素，

的.addClass（ 'saveLink'） //執行後

來源

2012-11-27 22:20:48

更換它，我讀了直播（）是一種過時的功能，並應通過更換（）??? – jtheman

@jtheman你是對的，它應該是'$（document）.on（'click'，'a。save（）函數（e）{}）' –

live（）不被棄用，但使用live（）更加昂貴 –

.saveLink在第一次綁定事件時不存在於DOM中。一種可能的解決方案是在添加.saveLink類後綁定它。另一個是使用委派。理想情況下，ul將有id屬性（否則你將不得不使用另一個父高達document：

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

此外，.changeLink回調是從它必然原本這是可以解決的聯繫從來沒有綁定。使用代表團以同樣的方式，也可以取消綁定回調的事件。

來源

2012-11-27 22:21:13

jQuery點擊（）更新列表與AJAX

回答

相關問題