Question

我有一个动态创建的textareas列表，其中包含内容。下面是我如何检索数据并动态创建textareas。

$(document).ready(function(){

$('#btn').click(function(){
    var fullurl = $('#hiddenurl').val();
    var str = $('#email').val();
    $.post(fullurl, {
        sendValue : str
    }, function(data) {
        var table_output = '<table><thead><tr><th>Name</th><th>Email</th></tr></thead>';
    $.each(data, function(i, d) {
        table_output += '<tr><td>'+d.Name+'</td><td>'+d.Email+'</td></tr>';
        output += '<tr><td colspan="2"><textarea name="description" id="desc_'+d.ID+'" class="desc">'+d.Description+'</textarea></td></tr>';            

        tinyMCE.init({
            mode : "exact",
            elements : 'desc_'+d.ID,
            theme_advanced_buttons1 : "mylistbox,mysplitbutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom"
        });

    });
 table_output += '</table>';
 $('#task_data_div').append(table_output);

我尝试过如上所示实现tinyMCE，但它似乎不起作用。任何人都可以帮助我，也许可以指出我正确的方向。

谢谢。

Answer 1

为了简单起见，我不得不考虑你的Ajax调用，但我的#btn点击处理程序将透明地插入你的成功处理程序。

演示（jsFiddle） http://jsfiddle.net/C59EW/

HTML

<button id="btn">button</button>
<div id="show_data"></div>

Javascript（+ jQuery，+ tinyMCE）

$(document).ready( function() {
    var data = [{ID:"1",Description:"text 1"}, {ID:"2",Description:"text 2"}];

    $('#btn').click( function() {
        $.each( data, function(i, d) {
            $('#show_data').append('<textarea name="description" id="desc_'+d.ID+'" class="desc">'+d.Description+'</textarea>');
            tinyMCE.init({
                mode : "exact",
                elements : 'desc_'+d.ID,
                theme_advanced_buttons1 : "mylistbox,mysplitbutton,bold,italic,underline,separator,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,undo,redo,link,unlink",
                theme_advanced_buttons2 : "",
                theme_advanced_buttons3 : "",
                theme_advanced_toolbar_location : "top",
                theme_advanced_toolbar_align : "left",
                theme_advanced_statusbar_location : "bottom"
            });
        });
    });

});

将tinyMCE添加到多个动态创建的textareas中

1 个答案: