Question

我有以下HTML代码：

<div id="summary_form">
    <textarea class="summary">Please fill in</textarea><br/>
    <textarea class="summary">Please fill in</textarea><br/>
   <div>

我在document.ready上调用了以下JS代码：

var summaries = $('textArea.summary');

这个JS用类名'summary'抓取所有textareas并将它存储在summaryries变量中。

我还有一个链接，当用户点击它时，将使用Ajax动态添加另一个带有'summary'类名的textarea，如下所示：

$("#add_summary").click(function(){  
  $('#temp').load("/addSummary.html", function() {
  $("#summary_form").append($('#temp').html());
  summaries = $('textArea.summary');
});

addSummary.html只包含以下HTML：

<textarea class="summary">Please fill in</textarea><br/>

提交表单时，我运行以下代码以清除“请填写”帮助文本的文本内容，如下所示：

$("#user-form").submit(function () {
 //First reload all old and new textareas into summary variable - THIS PART IS NOT WORKING!
 summaries = $('textArea.work_history_summary');

 for (var i=0; i<summaries.length; i++)
    {
      if (summaries[i].value == 'Please fill in')
      {   
        summaries[i].value = '';
      }
    }
 });

但是当表单提交时，所有原始textareas都被清除，但新添加的textareas不是。出于某种原因，JQuery无法看到新的textareas并将它们存储在摘要变量中。

知道我可能做错了吗？

谢谢！

Answer 1

你加载的内容有可能有点不同 - 不是textArea，还是不是摘要？只是错了？

此外，请考虑使用$ .ajax（）方法：

$.ajax({
    url: '/addSummary',
    success: function(response) {
        $('#summary_form').append(response);
        summaries = $('textArea.summary');
    }
});

这样您就不需要任何临时存储，但可以将获得的html直接附加到您的表单。也许这也将解决您的问题。（我可能对参数名称或函数参数顺序有点不对，但你有主要想法，不是吗？）

Jquery和动态内容

1 个答案: