Làm thế nào để thay thế và nối thêm với Javascript

Question

Tôi có một hệ thống nhận xét mà tôi muốn thực hiện chỉnh sửa nội dòng (khi ai đó biết một plugin tốt hoặc một cái gì đó tương tự, vui lòng cung cấp cho tôi tên) và tìm thấy đoạn mã Javascript sẽ thay thế văn bản bằng văn bản và văn bản làm giá trị của vùng văn bản đó.

Nhưng bây giờ tôi cần thêm nút (nút gửi) vào vùng văn bản đó để người dùng có thể lưu văn bản mà anh ấy đã chỉnh sửa.

Mã của tôi trông bây giờ như thế

<span id="name">comment</span> 

<div onclick="replacetext();">test</div> 

<script type="text/javascript"> 
    function replacetext(){ 
      $("#name").replaceWith($('<textarea>').attr({ id: 'name', value: $('#name').text() })); 
    </script> 

Tôi đã thử nghiệm nó ra với $("#name").append('<button>yes</button>'); nhưng nó đã không làm việc.

Answer 1

Các giải pháp có thể được thử nghiệm bằng cách sử dụng jsFiddle sau: http://jsfiddle.net/adb8X/5/

Dòng Tôi tin rằng bạn đang theo đuổi là:

$('<button>yes</button>').insertAfter("#name"); 

Đoạn mã trên chèn phần tử DOM mới được tạo (có) ngay sau DOM ement với id được chỉ định trong bộ chọn đích ("#name").

Thông tin thêm về insertAfter đây: http://api.jquery.com/insertAfter/

Nếu bạn muốn chèn nó vào replacetext(), nó sẽ trở thành:

function replacetext() { 
    $("#name").replaceWith($('<textarea>').attr({ 
     id: 'name', 
     value: $('#name').text() 
    })); 

    $('<button>yes</button>').insertAfter("#name"); 

} 

---

Lưu ý: Tôi cũng chỉnh jsFiddle của bạn. Vui lòng kiểm tra tại đây: http://jsfiddle.net/adb8X/5/ (Đã xảy ra sự cố với cài đặt và lỗi đánh máy nhỏ nếu tôi nhớ chính xác). Dòng tương ứng trong đó là:

$("#name").append($('<button>hi</button>')); 

Answer 2

Đây là mã hoạt động.

<span id="name">comment</span> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
<div onclick="replacetext();">test</div> 

<script type="text/javascript"> 
    function replacetext(){ 
      $("#name").replaceWith($('<textarea>').attr({ id: 'name', value: $('#name').text() })); 
      $('#name').after('<input type="submit" />'); 
    } 
    </script> 

Chấp nhận nó như là câu trả lời nếu nó hoạt động

Answer 3

function replacetext() { 

    $("#name").replaceWith($('<textarea>').attr({ 
     id: 'name', 
     value: $('#name').text() 
    })); 
    $('#name').after('<button id="test">test</button>'); 
} 

$('#test').live("click",function(){ 
    alert("I am a newly-created element and .click won't work on me."); 

}); 

Bạn không thể sử dụng .append() trong một textarea vì bạn không thể "chèn nội dung" hoặc thêm vào sau nó (có khác cách giải quyết cho điều đó). Bạn có thể làm điều đó trong DIV, thẻ đoạn hoặc bất kỳ thứ gì có thể hoạt động như một vùng chứa.

http://api.jquery.com/append/
http://api.jquery.com/after/
http://api.jquery.com/live/ hoặc .Trên() http://api.jquery.com/on/

Answer 4

Một tùy chọn khác mà sẽ cho phép bạn thay thế nhãn được tạo ra tự động, không chỉ là một với id tĩnh = "Tên" ví dụ:

html cho một nhãn hoặc một liên kết anchor trong ví dụ này được thay thế bằng hộp:

<a href="#" onclick="editOpen(this);">@Html.DisplayFor(modelItem => Model.Name)</a>| 

Javascript (bên trong editOpen chức năng)

function editOpen(ctrl) { 
    //textbox 
    var editText = $('<input>').attr({ 
     type: 'text', 
     value: $(ctrl).text() 
    }); 

    //edit button 
    var saveEditLink = $('<input>').attr({value:'Save',type:'button'}); 

    //Put them together 
    $(ctrl).replaceWith($(editText).after($(saveEditLink))); 

} 

012.