使用 jquery 动态生成表单元素

Question

页面中有多个段落。每个段落后面必须跟一个带有两个按钮Add 和Edit 的div。单击Add 按钮应在其上方动态创建一个文本区域。

无效的相关参考：

• How to use jQuery to add form elements dynamically
• How to add (clone) form fields using jQuery and increment ids and names

演示

---

---

HTML 代码：

<div id="notes"></div>

在我的 JavaScipt 中：

<script>
// get notes in json format from php array
var notes = <?php echo json_encode($notes); ?>;

// call the scan function to iterate through the notes
scan(notes);

function scan(obj)
{
    jQuery.each(obj, function(key, val) {
    if (val instanceof Object) {
    for ( var v in val ) {
        if (val[v]['type'] == 'Topic') {
           $("#notes").append('<h2 class="topic">'+val[v]['content']+'</h2>');
        }
        if (val[v]['type'] == 'Subtopic') {
           $("#notes").append('<h4 class="subtopic">'+val[v]['content']+'</h4>');
        }
        if (val[v]['type'] == 'Concept') {
           $("#notes").append('<h5 class="concept">'+val[v]['content']+'</h5>');
        }
        if (val[v]['type'] == 'Paragraph') {
           $("#notes").append('<p>'+val[v]['content']+'</p>');

           // append input for all paragraphs
           $('#notes').append('<div class="paragraphs">');
           $('#notes').append('<div id="block">');
           $('#notes').append('<p class="edit"></p>');
           $('#notes').append('<p>');
           $('#notes').append('<div id="para">');
           $('#notes').append('<p><textarea cols="40" rows="2" id="textarea"></textarea></p>');
           $('#notes').append('<button id="add" class="add success tiny">Add</button>');
           $('#notes').append('&nbsp;');
           $('#notes').append('<button id="startEdit" class="canEdit tiny">Edit</button>');
           $('#notes').append('</div>');
           $('#notes').append('</p>');
           $('#notes').append('</div>');
           $('#notes').append('</div>');

        }
        scan(val[v]);
        }   
     }
  });
};

// Add paragraph button

i = 1;
$('#textarea'+i).hide();

text = $('#textarea'+i).text();
var data = '{"subject_id":'+$subject_id+',"teacher_id":'+$teacher_id+',"editedContent":"'+text+'"}';

$('.paragraphs').on('click', '#add'+i, function() {
  if ( $('#add'+i).text() == "Add" ) {

    ajaxRequest(data, 'editNotes', 'POST');  // POST request on editNotes

    $('#textarea'+i).show();
    $('#add'+i).text('Save');
    $('#textarea'+i).focus(function() {
        this.select();
    });
  }
  else if ( $('#add'+i).text() == "Save" ) {

    ajaxRequest(data, 'saveNotes', 'POST');  // POST request on saveNotes

    if ($('#textarea'+i).val() == ''){
      alert('Enter something...');
    } else {
      $('#add'+i).text("Add");
      $('#textarea'+i).hide();
      var overview = $('#textarea'+i).val();
      i++;
      console.log('after: i='+i);
      $('.paragraphs').append('<div id="block'+i+'"><p class="edit'+i+'">'+overview+'</p><div id="para'+i+'"><p><textarea cols="40" rows="2" id="textarea'+i+'"></textarea></p><button id="add'+i+'" class="add'+i+' success tiny">Add</button><button id="startEdit'+i+'" class="canEdit'+i+' tiny">Edit</button></div></div>');
    }
  }

});
</script>

如何使用递增的 id 和类名动态添加表单元素？

感谢任何帮助

Answer 1

不幸的是，当您提交类似以下内容时，附加功能并不像看起来那样：

$('#element').append('<div>start here'):
$('#element').append('end here</div>'):

发送的第一个调用将关闭 div，它实际上会创建 2 个单独的元素。解决这个问题的一种方法是创建一个变量并将所有元素放入该变量并附加它，而不是使用大的追加，因为它可能会有点混乱。

示例：

http://jsfiddle.net/h8V93/

var appends='<div class="paragraphs">'
            +'<div id="block">'
            +'<p class="edit"></p>'
            +'<p>'
            +'<div id="para">'
            +'<p><textarea cols="40" rows="2" id="textarea"></textarea></p>'
            +'<button id="add" class="add success tiny">Add</button>'
            +'&nbsp;'
            +'<button id="startEdit" class="canEdit tiny">Edit</button>'
            +'</div>'
            +'</p>'
            +'</div>'
            +'</div>';

            $('#notes').append(appends);

我希望这会有所帮助。

更新

编辑以供进一步阅读，实际执行此操作的最佳方法是创建一个 html 页面作为单独的文件并像这样包含它:::

$.get("<urlhere>", function (data) {
    //Append, After, Before, Prepend data or whatever you want to do with it.
});

这在您将 html 文件保存在自己的服务器上的 GM 或 TM 脚本中非常方便。

希望此更新对未来的读者有所帮助。

在最新版本的 TM (tampermonkey) 中，由于添加了跨域源策略，使用 GM_xmlhttpRequest -> http://wiki.greasespot.net/GM_xmlhttpRequest