0

我的 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/

4

3 回答 3

3

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

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

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

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

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

原因是您的 click 事件处理程序仅适用于使用 DOM 加载的元素，但您的 ajax 编辑函数将创建加载时（动态创建）时不在 DOM 中的元素。

于 2012-12-08T00:18:09.397 回答
1

您可以隐藏/显示它，而不是销毁和重新创建按钮（在这种情况下您会丢失事件处理程序）

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

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

于 2012-12-08T00:22:45.907 回答
1

与其真正摆脱按钮，为什么不直接在点击时使用 .hide，然后在点击取消时使用 .show 呢？

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

更改的部分是：

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

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

于 2012-12-08T00:21:05.037 回答