JQuery-实时事件的替换处理程序

我最初的问题是通过从这个网站上拼凑其他答案来回答的（谢谢StackOverflow！）-只是在这里发布，以帮助其他疑惑的人

我有一个现场活动，比如：

function addValidator(selector, validator) {
    // Add the selector and validator to a hash map
    $(selector).live('change', validateTag);
}

$('input, select, textarea').live('change', Valid.validateTag);

表行的数量随时都会变化，我不想将表创建代码与验证代码紧密耦合

后来出现了另一个验证函数，对第一个函数一无所知，我需要避免同一个实时选择器触发validateTag函数两次，这将聚合所有验证消息，并显示关于给定输入的单个UI

所以-每次有人调用addValidator时，我都需要实际替换live事件处理程序，或者更具体地说，扩展其选择器（因为我仍然在调用validateTag，所以我只需要live处理程序覆盖更多内容）。我会把我的答案贴在下面，很高兴听到更多

--更新以澄清我在做什么

我有几个动态表页面，可以包含任意数量的行。我不希望验证和表管理代码紧密耦合。我希望能够在表格行中设置输入，如：

<input class="required email"/>

显然，随着行的添加和删除，我可以继续将事件重新应用于输入，但这将使表生成器代码和验证代码紧密结合

另一个技巧是只构建一个实时事件，如：

function addValidator(selector, validator) {
    // Add the selector and validator to a hash map
    $(selector).live('change', validateTag);
}

$('input, select, textarea').live('change', Valid.validateTag);

然后使用hashmap查找具体应用于这个特定标记的内容，但前提是我要验证的只有输入、选择和文本区域，我要做的唯一验证是onchange

---

我真正想要的是让任何类型的验证规则通过选择器匹配任何标记，而不需要上述任何一种。第二个攻击并不太糟糕，但这是一个错误的假设，对于不使用这三个基本标记之一的自定义控件来说是不灵活的。

您可以将现有事件类型（'click'）和原始处理程序（在本例中为

validateTag

）传递给函数以删除该处理程序。

您可以传递现有事件类型（'click'）和原始处理程序（在本例中为

validateTag

）添加到函数中以删除处理程序。

经过大量修改并从其他答案中获得建议后更新

addRule: function(selector, validator) {
    // Save the rule
    Valid.rules.push({selector: selector, validator: validator});

    // Hunt for an existing live selector from prev addRule calls and expand on it if need be
    var existingLiveEvents = $(document).data('events');
    if (existingLiveEvents.change) {
        var existing = existingLiveEvents.change.find(function (item) { return item.origHandler == Valid.validateThis; });
        if (existing) {
            // Expand the selector to include past rules
            selector = existing.selector + ', ' + selector;

            // And kill off the old validate selector
            $(existing.selector).die('change', Valid.validateThis);
        }
    }

    $(selector).live('change', Valid.validateThis);
}

validateThis（）使用jQuery.is（）方法检查每个规则，以确定此标记是否受该规则的影响，如果受影响，则对其运行验证器

如果您仔细看，其中还有一个来自我创建的数组库的.find（）调用-它执行您预期的操作：迭代数组，直到传入的比较器函数返回true。然后它将停止的项交给您，或者为null

---

如果人们对这个库感兴趣，我很乐意用它来打开源代码。jQuery验证插件很有趣，但是它似乎无法处理我正在使用的动态输入集。在我的库中还有一些其他的魔术，它是基于规则集获得输入的标签。从这里的其他答案中可以看出一些建议

addRule: function(selector, validator) {
    // Save the rule
    Valid.rules.push({selector: selector, validator: validator});

    // Hunt for an existing live selector from prev addRule calls and expand on it if need be
    var existingLiveEvents = $(document).data('events');
    if (existingLiveEvents.change) {
        var existing = existingLiveEvents.change.find(function (item) { return item.origHandler == Valid.validateThis; });
        if (existing) {
            // Expand the selector to include past rules
            selector = existing.selector + ', ' + selector;

            // And kill off the old validate selector
            $(existing.selector).die('change', Valid.validateThis);
        }
    }

    $(selector).live('change', Valid.validateThis);
}

validateThis（）使用jQuery.is（）方法检查每个规则，以确定此标记是否受该规则的影响，如果受影响，则对其运行验证器

如果您仔细看，其中还有一个来自我创建的数组库的.find（）调用-它执行您预期的操作：迭代数组，直到传入的比较器函数返回true。然后它将停止的项交给您，或者为null

---

如果人们对这个库感兴趣，我很乐意用它来打开源代码。jQuery验证插件很有趣，但是它似乎无法处理我正在使用的动态输入集。在我的库中还有一些其他的魔术，可以得到基于规则集的输入的标签。

也许你可以使用命名空间事件：

$(selector).live('change.namespace', validateTag);
$(selector).unbind('.namespace');

---

也许您可以使用名称空间事件：

$(selector).live('change.namespace', validateTag);
$(selector).unbind('.namespace');

---

也许可以尝试以以下方式解耦您的实现：

var Valid = (function(){

   var supportedEvents = ['click', 'keyup', 'change'],
       listeners = {};

   for(var i=0; i<supportedEvents.length; ++i) {
      listeners[supportedEvents[i]] = [];
   }

   function addListener(type, classes, fn) {
      listeners[type].push({classes:classes, fn:fn});
   }

   $('.validate').live(supportedEvents.join(' '), function(e){

      for(var i=0; i<listeners[e.type].length; ++i) {
         if ($(this).hasClass(listeners[e.type][i].classes)) {
            listeners[e.type][i].fn.call(this, e);
         }
      }

   });

   return {
      supportedEvents: supportedEvents,
      addListener: addListener
   };

})();

var Valid=（函数（）{
var supportedEvents=[“单击”、“键控”、“更改”]，
侦听器={}；
对于（var i=0；i，可以尝试以下方式解耦您的实现：

var Valid = (function(){

   var supportedEvents = ['click', 'keyup', 'change'],
       listeners = {};

   for(var i=0; i<supportedEvents.length; ++i) {
      listeners[supportedEvents[i]] = [];
   }

   function addListener(type, classes, fn) {
      listeners[type].push({classes:classes, fn:fn});
   }

   $('.validate').live(supportedEvents.join(' '), function(e){

      for(var i=0; i<listeners[e.type].length; ++i) {
         if ($(this).hasClass(listeners[e.type][i].classes)) {
            listeners[e.type][i].fn.call(this, e);
         }
      }

   });

   return {
      supportedEvents: supportedEvents,
      addListener: addListener
   };

})();

var Valid=（函数（）{
var supportedEvents=[“单击”、“键控”、“更改”]，
侦听器={}；
对于（var i=0；iChris，我并不完全理解您的场景100%，尽管我认为您不需要绑定和解除绑定，而是需要存储列表/映射并在验证器代码中引用它们。也就是说，应该有一个通用验证器，您可以从中添加某些函数并“附加”没有一个箱子也没有解绑，就把它们交给特定的选择器。嗨，大卫，我沿着那条路走了回来。我会在我的问题中澄清。晚了几天，虽然我试图解释我的想法-这很简单。克里斯，我不太理解你的场景100%，尽管我认为你不需要绑定和解绑，而是需要存储列表/映射并在验证程序代码中引用它们。例如，应该有一个通用验证程序，您可以从中添加某些函数并“附加”没有一个箱子或解除绑定就将它们发送给特定的选择器。嗨，davin，我沿着这条路开始，然后又返回。我将在我的问题中澄清。虽然我试图解释我的想法，但晚了几天——这非常简单。这比我的解除绑定黑客要干净得多，它使JQuery的内部有点混乱。我修改了我的代码以使用此建议实际上修复了一个令人讨厌的bug。检查我更新的答案以获得结果。谢谢。这比我的unbind hack要干净得多，它使JQuery的内部变得有点混乱。我修改了我的代码以使用此建议，并实际修复了一个令人讨厌的bug。检查我更新的答案以获得结果。谢谢。我明白了，所以在在这种情况下，任何要验证的标记都会有一个额外的类“.validate”，而不是“.required”、“.email”等。这很接近，但是