试图编写一个Javascript类来处理向我的HTML动态添加更多数据的问题。需要一些指导吗

以下是我的目标：

HTML

最近我发现自己的HTML中有更多的“addmore”内容，所以我一直在尝试构建一个类，该类将为我完成所有的后续工作，我可以在我的所有项目中重用。希望上面的代码将是我每次必须添加的全部代码，然后剩下的代码就为我完成了

我一直在胡思乱想，下面是全班要做的事情：

• 将jQuery绑定应用于提供的“button”对象，以便添加/删除字段集
• 当添加一个新的字段集时，我们必须调用bind函数，这样新字段集的“a.add”按钮才能工作（我发现jQuery的.live（）函数有缺陷，无论出于何种原因，并尝试避免它）
• 它有望在没有内存泄漏的情况下做到这一点：}

Javascript类

我本来打算在添加新的字段集以重新应用绑定时让.bind（）方法（在我的类中）自己调用，但对效率（速度/内存）失去了信心

我应该如何处理这个问题？你有什么建议吗？你能推荐改进吗

---

感谢您的帮助。

以最简单的形式，您可以执行以下操作：

var html = '{put html to add each time here}';

$('.add').click(function() {
    $(html).insertAfter($('fieldset').last());
    return false;
});

$('.remove').live('click', function() {
    $(this).parent().remove();
    return false;
});

您可能需要根据您的具体需求对其进行调整，但这应该可以完成您在示例中描述的内容

---

更新：很抱歉，remove应该使用live方法。

要创建新的DOM元素，请允许规范/参数为以下任意值：

简单HTML作为字符串（如上面的示例）

返回DOM元素或HTML文本的函数。您可以通过添加 在函数中创建HTML/元素时使用onclick元素。尽管在AddMore（）范围内执行此操作会更加繁琐 如果返回的不是DOM元素

对帮助器/工厂方法（可能是模板和名称/值对）的输入—除非您已经知道足够的模式，否则推迟此操作

选项#1看起来几乎没用，但是#3可能很难，除非你现在有额外的时间

注:

• 您可能需要使用

  $（newdomeElement）.insertBefore（\u this.button）

  而不是

  \u此.element.after（newdomeElement）以便将新项目追加到列表的末尾

• 实际上，对于insertBefore（），您可能只使用

  this

  而不是

  \u this.button

  ，因为按钮（或锚点）可能是

  this

  ，但这限制了功能-只需将其设置为某种DOM元素（或等同于一个的jQuery对象）
• 在大多数情况下，我假设您的DOM元素表示您希望保存/发送/传输到服务器的数据，所以也提供一个删除前函数。甚至允许函数跳过删除操作——比如在确认（）之后

---

祝你好运。

我知道如何添加/删除元素。在新集合中添加jQuery live（）方法后，我很难想出一个重新应用click（）绑定的好方法。我以前在使用它时没有遇到问题。每次绑定事件的另一种方法是将

$（'.remove'）移动。单击（）

进入

$（'.add'）。单击（）

。这将在每次添加新字段集时绑定新创建的删除链接。

var addmore = new AddMore($('fieldset'));
addmore.buildCache(/*this will pull the innerHTML of the fieldset*/);

// bind the buttons
addmore.bind('add', $('a.add'));
addmore.bind('remove', $('a.remove'));

/*
   Class to handle adding more data to the form array

   Initialise the class by passing in the elements you want to add more of
   Then bind 'add' and 'remove' buttons to the functions and the class will do the rest
*/

/*
   Pass the jQuery object you want to 'addmore' of
   Ex: var x = new AddMore($('fieldset.addmore'));
*/
function AddMore($element)
{
   if (!$element || typeof($element) != 'object')
      throw 'Constructor requires a jQuery object';

   this.element = $element; // this is a jQuery object
   this.cache   = null;
}

/*
   Supply clean HTML to this function and it will be cached
   since the cached data will be used when 'adding more', you'll want the inputs to be emptied,
   selects to have their first option selected and any other data removed you don't want readded to the page
*/
AddMore.prototype.buildCache = function(fieldset)
{
   if (!fieldset)
      throw 'No data supplied to cache';

   this.cache = fieldset;
}

/*
   use this to create the initial bindings rather than jQuery
   the reason? I find .live() to be buggy. it doesn't always work. this usually means having to use a standard .bind()
   and then re-bind when we add in the new set

   that's what this class helps with. when it adds in the new data, it rebinds for you. nice and easy.
*/
AddMore.prototype.bind = function(type, $button)
{
   if (!type || !$button && (type != 'add' && type != 'remove'))
      throw 'Invalid paramaters';

   // don't reapply the bindings to old elements...
   if ($button.hasClass('addmore-binded'))
      return;

   // jQuery overwrites 'this' within it's scope
   var _this = this;

   if (type == 'add')
   {
      $button.bind('click', function()
      {
         _this.element.after(_this.cache);
      });
   }
}

var html = '{put html to add each time here}';

$('.add').click(function() {
    $(html).insertAfter($('fieldset').last());
    return false;
});

$('.remove').live('click', function() {
    $(this).parent().remove();
    return false;
});