0

我正在尝试使用 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/

很高兴我能得到一些意见，我的错误是什么？

4

3 回答 3

2

该事件将与一个元素相关联，而不是特定于一个类..

如果您想与班级一起工作，您可能需要委派活动

更新代码

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

检查更新的小提琴

于 2012-11-27T22:21:32.143 回答
1

使用.live()代替。这是因为

$('a.saveLink').on('click', function(e)) //此时不存在元素，

.addClass('saveLink') // 之后执行

于 2012-11-27T22:20:48.430 回答
1

.saveLink第一次绑定事件时 DOM 中不存在。一种可能的解决方案是在添加类后绑定它.saveLink。另一种是使用委托。理想情况下，ul将具有一个id属性（否则您将不得不使用另一个父级document：

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

此外，.changeLink回调永远不会脱离它最初绑定的链接。这可以使用委托以相同的方式解决，或者您可以在回调中取消绑定事件。

于 2012-11-27T22:21:13.107 回答