javascript - 尝试编写一个 Javascript 类来处理动态添加更多数据到我的 HTML 中。需要一些指导

Question

这是我想要实现的目标:

HTML

<fieldset id="addmore">
   <p>blah</p>

   <a class="remove">remove me</a>
</fieldset>

<a class="add">add more fieldsets</a>

Javascript

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'));

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

我一直在即兴发挥这件事，所以，我突然想到，这就是类(class)必须做的事情:

• 将 jQuery 绑定(bind)应用到提供的“按钮”对象，以便我们可以添加/删除字段集
• 当添加一个新的字段集时，我们必须调用绑定(bind)函数，以便新字段集的“a.add”按钮能够工作(我发现 jQuery 的 .live() 函数由于某种原因有问题，并尝试以避免它)
• 它有望在没有内存泄漏的情况下做到这一点:}

Javascript 类

/*
   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);
      });
   }
}

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

我应该如何解决这个问题？你有什么指点吗？您能提出改进建议吗？

感谢您的帮助。

Answer 1

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

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;
});

您可能需要根据您的具体需求进行调整，但这应该可以实现您在示例中描述的效果。

更新:抱歉，删除应该使用 live 方法。