（セレクタを除去し、再び追加されたので）をクリックして機能は一度だけ働く

Question

は私が

$('.edit').click(function(){}と$('.button').click(function(e){}

$('.edit').click(function(){ 
 
    // uid = userid 
 
    var uid = '123'; 
 
    var self = $(this); 
 
    // closest in the parent elements 
 
    // use .find with caution unless you sure you have only one .input 
 
    // contenteditable makes element editable. use with caution as it accepts html tags, javascript 
 
    // .addClass for styling 
 
    var input = self.closest('tr').find('.input'); 
 
    input.attr('contenteditable','true').addClass('editable'); 
 
    self.closest('td').html('<span class="button">Save</span>'); 
 
    $('.button').click(function(e){ 
 
    e.preventDefault(); 
 
    var field = $(this).closest('tr').data('field'); 
 
    // get text instead of html from editable tr 
 
    var value = $(this).closest('tr').find('.input.editable').text(); 
 
    if (value.length > 0) { 
 
     var dataString = 'edit_info=' + uid + '&field=' + field + '&value=' + value; 
 
     alert(dataString); 
 
     // \t \t $.ajax({ 
 
     // \t \t \t type: "POST", 
 
     //  url: "ajax.php", 
 
     //  data: dataString, 
 
     //  success: function(data){ 
 
     //  \t if (data == 'success') { 
 
     input.attr('contenteditable','false').removeClass('editable'); 
 
     $(this).closest('td').html('<span class="edit">Edit Info</span>'); 
 
     // \t \t \t \t } 
 
     // \t \t \t } 
 
     // \t \t }); 
 
     return false; 
 
    }; 
 
    }); 
 
    return false; 
 
});

table tr td { 
 
    padding: 12px 15px; 
 
    border-bottom: 1px solid #d6d6d6; 
 
    box-sizing: border-box; 
 
} 
 

 
.edit { 
 
    color: blue; 
 
    cursor: pointer; 
 
} 
 

 
.editable { 
 
    background-color: #FFF; 
 
    border: 1px solid #d6d6d6; 
 
} 
 

 
.button { 
 
    background-color: blue; 
 
    color: #FFF; 
 
    border-radius: 8px; 
 
    line-height: 18px; 
 
    padding: 5px 8px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr data-field="name"> 
 
    <td>Name</td> 
 
    <td class="input">John Doe</td> 
 
    <td><span class="edit">Edit Info</span></td> 
 
    </tr> 
 
    <tr data-field="email"> 
 
    <td>Email</td> 
 
    <td class="input">johndoe@email.com</td> 
 
    <td><span class="edit">Edit Info</span></td> 
 
    </tr> 
 
</table>

を発射するために管理しかし、それは一度だけ動作します。なぜ誰かが説明できますか？ここで

は私のバイオリンです：あなたはDOMから.edit要素を削除し、新しいものを作成しているので、https://jsfiddle.net/michaelyuen/s7d06ra8/6/

Answer 1

問題があります。オリジナルを削除すると、そのクリックハンドラはそのハンドラと一緒になり、新しいコピーにはクリックハンドラが割り当てられません。

この問題を解決する最良の方法は、このように、委任のイベントハンドラを使用することです：

$(document).on('click', '.edit', function(e) { 
 
    e.preventDefault(); 
 
    var $self = $(this); 
 
    var $input = $self.closest('tr').find('.input'); 
 

 
    $input.attr('contenteditable', 'true').addClass('editable'); 
 
    $self.closest('td').html('<span class="button">Save</span>'); 
 
}); 
 

 
$(document).on('click', '.button', function(e) { 
 
    e.preventDefault(); 
 
    var uid = '123'; 
 
    var $self = $(this); 
 
    var field = $self.closest('tr').data('field'); 
 
    var value = $self.closest('tr').find('.input.editable').text(); 
 
    var $input = $self.closest('tr').find('.input'); 
 

 
    if (value.length > 0) { 
 
    var data = { 
 
     edit_info: uid, 
 
     field: field, 
 
     value: value 
 
    } 
 
    console.log(data); 
 

 
    // \t $.ajax({ 
 
    // \t  type: "POST", 
 
    //  url: "ajax.php", 
 
    //  data: data, 
 
    //  success: function(data){ 
 
    //  \t if (data == 'success') { 
 
        $input.attr('contenteditable', 'false').removeClass('editable'); 
 
        $self.closest('td').html('<span class="edit">Edit Info</span>'); 
 
    // \t \t  } 
 
    //  \t } 
 
    // }); 
 
    }; 
 
});

table tr td { 
 
    padding: 12px 15px; 
 
    border-bottom: 1px solid #d6d6d6; 
 
    box-sizing: border-box; 
 
} 
 
.edit { 
 
    color: blue; 
 
    cursor: pointer; 
 
} 
 
.editable { 
 
    background-color: #FFF; 
 
    border: 1px solid #d6d6d6; 
 
} 
 
.button { 
 
    background-color: blue; 
 
    color: #FFF; 
 
    border-radius: 8px; 
 
    line-height: 18px; 
 
    padding: 5px 8px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr data-field="name"> 
 
    <td>Name</td> 
 
    <td class="input">John Doe</td> 
 
    <td><span class="edit">Edit Info</span> 
 
    </td> 
 
    </tr> 
 
    <tr data-field="email"> 
 
    <td>Email</td> 
 
    <td class="input">johndoe@email.com</td> 
 
    <td><span class="edit">Edit Info</span> 
 
    </td> 
 
    </tr> 
 
</table>

はまた、私は代わりに、オブジェクトに情報を送信するために、あなたのAJAXリクエストを改正することを注意してください一緒に謎解きをするこれは、どちらも保守が容易であるという利点があります。また、jQueryが特殊文字をエンコードすることも意味します。