javascript - 使用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 脚本中非常方便。

希望这次更新对 future 的读者有所帮助。

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