Question

好的，我刚刚掌握了jQuery并且遇到了一些问题。

我有一个链接可以使用textarea

更改<div>的内容

<a href="#" class="edit">Edit</a>

点击后我希望保存链接更改原始<div>中textarea的内容，这是我拥有的代码

$(function(){
   var content = $('.edit').text();

   $('.edit').click(function(){
      $('.content').html('<textarea class="text">' + content + '</textarea>');
      $('.text').focus();
      $(this).removeClass('edit').addClass('save').text('Save');
   }

   $('.save').live('click', function(){

      $('.content').html($('.text').val()); 
      $(this).removeClass('save').addClass('edit').text('Edit');          

       // Ajax code to save new content

   });

});

我的问题是，当我单击“编辑”按钮时，因为我添加了类save，它还会执行.save点击功能。如何确保仅在单击保存功能时才执行.save功能。

Answer 1

将您的点击事件处理程序附加到a元素本身，然后检查它是否具有“编辑”或“保存”类，并根据该可能性执行操作：

$('a').click(
    function(){
        if ($(this).hasClass('edit')){
            $(this).removeClass('edit').addClass('save').text('save');
        }
        else if ($(this).hasClass('save')){
            $(this).removeClass('save').addClass('edit').text('edit');
        }
        return false; // or not, you decide...
    });

JS Fiddle demo

Answer 2

我认为你需要告诉jquery你将处理点击事件，例如

$('.edit').click(function(event){
  event.preventDefault();
  $('.content').html('<textarea class="text">' + content + '</textarea>');
  $('.text').focus();
  $(this).removeClass('edit').addClass('save').text('Save');

}

有希望停止点击事件，只在点击时点击保存触发器。

Answer 3

而不是乱搞类，我会检查文本 - 因为你已经硬编码它不会有太大的区别：

$('.edit').live('click', function() {
    var curText = $(this).text();
    if (curText === 'Edit') {
        $('.content').html('<textarea class="text">' + content + '</textarea>');
        $('.text').focus();
        $(this).removeClass('edit').addClass('save').text('Save');
    } else {
        $('.content').html($('.text').val()); 
        $(this).removeClass('save').addClass('edit').text('Edit');          
        // Ajax code to save new content
    }
});

jquery通过更改类更改链接的单击功能

3 个答案: