将事件绑定到 jQuery 中的自定义插件函数

发布于 2024-08-16 14:57:26 字数 828 浏览 6 评论 0原文

我如何修改我的插件以允许在通话时加载事件？现在，插件正在页面加载时加载，我希望它能够与 .blur() 或我想要分配它的任何事件一起使用。任何帮助将不胜感激：

// The Plugin
(function($) {
  $.fn.required = function() {
    return this.each(function() {

      var $this = $(this), $li = $this.closest("li");
      if(!$this.val() || $this.val() == "- Select One -") {
        console.log('test');
        if (!$this.next(".validationError").length) {
          $li.addClass("errorBg");
          $this.after('<span class="validationError">err msg</span>');
        }
      } else if($this.val() && /required/.test($this.next().text()) === true) {
        $li.removeClass("errorBg");
        $this.next().remove();
      }

    });
  }
})(jQuery);

// The Event Call
$("[name$='_required']").required().blur();

它不适用于blur()，它在文档加载时触发插件而不是.blur()事件。

原文

How would I modify my plugin to allow to load with an event on the call? Right now the plugin is loading when the page loads and I want it to work with .blur() or whatever event I want to assign it instead. Any help would be appreciated:

// The Plugin
(function($) {
  $.fn.required = function() {
    return this.each(function() {

      var $this = $(this), $li = $this.closest("li");
      if(!$this.val() || $this.val() == "- Select One -") {
        console.log('test');
        if (!$this.next(".validationError").length) {
          $li.addClass("errorBg");
          $this.after('<span class="validationError">err msg</span>');
        }
      } else if($this.val() && /required/.test($this.next().text()) === true) {
        $li.removeClass("errorBg");
        $this.next().remove();
      }

    });
  }
})(jQuery);

// The Event Call
$("[name$='_required']").required().blur();

It's not working on blur(), it's triggering the plugin on document load instead of the .blur() event.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

时光是把杀猪刀 2024-08-23 14:57:26

在 Javascript 中，当您将 () 放在函数名称后面时，它会立即执行。因此，当解释器遇到 ("[name$='_required']").required().blur(); 时，它会立即执行 required，然后附加返回值值 blur() （这似乎不是你想要的）。尝试这样做：

$("[name$='_required']").required.blur();

这应该将 required 的实际函数对象绑定到 blur() 并使其在该事件上执行。

In Javascript, when you put () after a function name, it causes it to be executed immediately. So when the interpreter encounters ("[name$='_required']").required().blur();, it executes required immediately and then attaches the return value to blur() (which is not what you want, it seems). Try doing it this way:

$("[name$='_required']").required.blur();

That should bind the actual function object of required to blur() and cause it to be executed on that event.

回复收藏 0 原文

巴黎盛开的樱花 2024-08-23 14:57:26

(function($) { 
    $.fn.required = function() { 
        var handler = function() {
            var $this = $(this), $li = $this.closest("li"); 
            if(!$this.val() || $this.val() == "- Select One -") { 
              console.log('test'); 
              if (!$this.next(".validationError").length) { 
                $li.addClass("errorBg"); 
                $this.after('<span class="validationError">err msg</span>'); 
              } 
            } else if($this.val() && /required/.test($this.next().text()) === true) { 
              $li.removeClass("errorBg"); 
              $this.next().remove(); 
            } 
        };
        return this.each(function() {
            // Attach handler to blur event for each matched element:
            $(this).blur(handler);
        })
    } 
})(jQuery); 

// Set up plugin on $(document).ready:
$(function() {
    $("[name$='_required']").required();
})

(function($) { 
    $.fn.required = function() { 
        var handler = function() {
            var $this = $(this), $li = $this.closest("li"); 
            if(!$this.val() || $this.val() == "- Select One -") { 
              console.log('test'); 
              if (!$this.next(".validationError").length) { 
                $li.addClass("errorBg"); 
                $this.after('<span class="validationError">err msg</span>'); 
              } 
            } else if($this.val() && /required/.test($this.next().text()) === true) { 
              $li.removeClass("errorBg"); 
              $this.next().remove(); 
            } 
        };
        return this.each(function() {
            // Attach handler to blur event for each matched element:
            $(this).blur(handler);
        })
    } 
})(jQuery); 

// Set up plugin on $(document).ready:
$(function() {
    $("[name$='_required']").required();
})

回复收藏 0 原文

~没有更多了~