Question

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

无效的相关参考资料：

样本

enter image description here

HTML code：

<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>' +' ' +'<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. });

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

希望此更新能够帮助未来的读者。

在最新版本的TM（tampermonkey）中，由于添加了跨域原始策略，请使用GM_xmlhttpRequest - ＆gt; http://wiki.greasespot.net/GM_xmlhttpRequest

使用jquery动态生成表单元素

1 个答案: