jquery unwrap Bên trong

Question

Tôi đang cố gắng tạo bản chỉnh sửa nội tuyến đơn giản cho hộp div. Khi tôi dblclick trên div, i wrapInner với thẻ textarea. Điều đó làm cho nó có thể chỉnh sửa. Nhưng làm thế nào tôi có thể unwrap thẻ textarea khi tôi nhấp vào outsite lĩnh vực textarea. Dưới đây là những gì tôi có mà không phải là làm việc. Ngoài ra tôi có nên sử dụng tập trung, mouseout, mouseleave hoặc bất kỳ của họ.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> 

<div id="test" style="width:300px; height:200px;"> 
    testing 
</div> 

<script type="text/javascript"> 
$("#test").live({ 
    dblclick: function() { 
     $("#test").wrapInner("<textarea/>") 
    }, 
    mouseleave: function() { 
     $("#test > textarea").unwrap() 
    } 
}); 
</script> 

Answer 1

Một vài điều bạn có thể nên làm khác đi.

$("#test").dblclick(function() { 
    $(this).wrapInner("<textarea/>").find('textarea').focus(); 
}).delegate('textarea','blur',function() { 
    $(this).parent().text(this.value); 
}); 

• Bind các dblclick trực tiếp đến #test
• Trong dblclick handler .find() mới textarea và .focus() vào nó
• Đặt .delegate() xử lý trên #test thay vì sử dụng .live()
• Sử dụng blur thay của mouseleave
• Trong trình xử lý blur, hãy đặt .text() của #test thành value của số textarea. (Điều này là rất quan trọng để đón các chỉnh sửa đã được thực hiện.)

Ví dụ:http://jsfiddle.net/drQkp/1/

---

Ví dụ:http://jsfiddle.net/drQkp/2/

Dưới đây là một ví dụ cho phép HTML để được nhập vào vùng văn bản.

$("#test").dblclick(function() { 
    $(this).html($("<textarea/>",{html:this.innerHTML})).find('textarea').focus(); 
}).delegate('textarea', 'blur', function() { 
    $(this).parent().html(this.value); 
}); 

Answer 2

Unwrap không tồn tại như tôi biết. Khi bạn có $('#test > textarea'), hãy gán nội dung của nó cho phụ huynh.

Sẽ ít xảy ra lỗi hơn nếu bạn bắt đầu với văn bản "kiểm tra" bên trong một số <span> hoặc gì đó, sau đó sao chép nội dung của khoảng đó vào vùng văn bản, sau đó quay lại.

Answer 3

$("#test > textarea").unwrap() không mở văn bản, do đó xóa div #test, thay vì xóa văn bản. Thay vào đó bạn muốn:

$("#test > textarea").contents().unwrap() 

Như bạn có thể nhìn thấy từ demo này, MouseLeave sẽ kích hoạt ngay lập tức trên bất kỳ di chuyển chuột sau khi wrapInner, vì vậy bạn có thể muốn ràng buộc MouseLeave vào textarea bên trong handler DoubleClick.