Question

我的jQuery代码出现了问题，当我按下“编辑”按钮，然后按下“取消”按钮时，如果我再次按“编辑”，则无法正常工作。

HTML

<div id="2">
<button class="edit" id="2">edit</button>
</div>

的jQuery

$('.edit').click(function(){
        var id = $(this).attr('id');
        var post = $('div#'+id);
        var title = $('div#'+id+'>h1').html();
        var content = $('div#'+id+'>p').html();
        var edit = '<input type="text" class="title" id="'+id+'" value="title"><br>';
        var edit2 = '<textarea class="content" id="'+id+'" rows="10" cols="100">content</textarea>';
        $(this).remove();        
        post.append(edit);
        post.append(edit2);
        post.append('<br><button id="'+id+'" class="save">save</button><button id="'+id+'" class="cancel">cancel</button>');
        $('.cancel').click(function(){
            $('div#'+id+'>input').empty().remove();
            $('div#'+id+'>textarea').empty().remove();
            $(this).empty().remove();
            $('.save').empty().remove();
            $('div#'+id+'>br').remove();
            post.append('<button class="edit" id="'+id+'">Edit</button>');
        });
        /*$('.save').click(function(){
            var newTitle = $('input#'+id+'.title').val();
            var newContent = $('textarea#'+id+'.content').val();
            console.log(newTitle);
            console.log(newContent);
            console.log(id);
            $.post('/editPost', {id: id, title: newTitle, content: newContent}, function(){
                location.reload();
            });
        });*/
    });

jsfidde：http://jsfiddle.net/pHCT8/2/

Answer 1

首先，您不能在两个元素上使用相同的ID，这肯定会导致浏览器和JS错误。

（如果您没有使用HTML5 DOCTYPE，那么您的ID不应该以数字开头）

然后使用jQuery on()语法作为实时处理程序：

$('#2').on('click','.edit', function(){

请注意，起始$('#2')是您希望点击侦听器工作的外部限制。如果你需要它，那么使用$('body').on('click','.edit', function(){这将听取整个身体标签内的所有.edit次点击

原因是你的click事件处理程序只对使用DOM加载的元素起作用，但你的ajax编辑函数会在加载（动态创建）时创建不在DOM中的元素。

Answer 2

而不是实际摆脱按钮，为什么不直接点击，然后.show当你点击取消？

http://jsfiddle.net/pHCT8/5/

更改的部分是：

$(this).hide();而不是$(this).remove;

$('.edit').show();而不是post.append('<button class="edit" id="'+id+'">Edit</button>');

Answer 3

不是破坏和重新创建按钮（在这种情况下你丢失了事件处理程序），你可以隐藏/显示它

var self = $(this).hide();
...
$('.cancel').click(function(){
    ...
    self.show();

http://jsfiddle.net/mowglisanu/pHCT8/4/

按钮第二次无法点击

3 个答案: