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考えられる解決策の 1 つは、クラスが追加されたらバインドすることです。もう 1 つは委任を使用することです。理想的には、 にulはid属性があります (それ以外の場合は、最大で別の親を使用する必要がありますdocument:

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

さらに、.changeLinkコールバックは、元々バインドされていたリンクからバインド解除されることはありません。これは、同じ方法で委任を使用して解決できます。または、コールバックでイベントのバインドを解除できます。

于 2012-11-27T22:21:13.107 に答える