Question

您好我正在创建jquery插件。当我专注于输入框时我坚持下去，然后它触发了两次。

＆＃13;

$(document).ready(function(){
   $('#searchText').typefast();
   $('#searchText1').typefast();
})
$.fn.typefast=function(){
   $('input').focus(function(){
      console.log($(this).attr('id'));
   })
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="" value="" id="searchText">
<input type="text" class="form-control" name="" value="" id="searchText1">

＆＃13;

`

Answer 1

它已运行两次，因为您在typefast()函数中明确调用了document.ready两次。即使您的选择器都缺少其中的#，仍会在空的jQuery包装器上调用typefast()。并且，由于typefast()实际上没有对被调用的包的内容做任何事情，因此它会继续并处理所有input个元素。因此，最终结果是所有input个元素都会typefast个focus个事件被注册到input个事件中。

如果（这是一个很大的 if ）你打算使用插件，你应该只调用一次因为插件找到所有$个元素并设置其事件处理程序。此外，插件具有一定的模式，建议遵循该模式以确保$(function(){ // You would want this to be a jQuery utility method (not a wrapped set method) // so you would set it up directly on jQuery, not jQuery.fn. This way, you can // just call it whenever you want without a wrapped set. $.typefast(); }); // By wrapping the plugin in an Immediately Invoked Function Expression // that passes itself the jQuery object, we guarantee the $ will work (function($){ $.typefast = function(){ $('input').focus(function(){ console.log($(this).attr('id')); }); } }(jQuery));实际上指向jQuery对象并确保方法链接起作用。这看起来像这样：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="" value="" id="searchText">
<input type="text" class="form-control" name="" value="" id="searchText1">

＆＃13;

focus

＆＃13;

但是，这里不需要jQuery插件。这不是插件的用途，根据最佳做法，您甚至不是 writing it 。这不是设置事件处理程序的方法。您需要做的就是为文本框的// Just passing a function directly to the jQuery object is the same // thing as explicitly setting a callback for document.ready $(function(){ // This is the function that will be called when any input gets the focus function typeFast(){ console.log($(this).attr('id')); } // Set all input elements to call typeFast when they receive the focus $('input').on("focus", typeFast); });事件设置事件处理程序：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" name="" value="" id="searchText">
<input type="text" class="form-control" name="" value="" id="searchText1">

＆＃13;

<node1>   
    <node2>
        <node3>A1</node3>
        <node3>A2</node3>
        <node3>A3</node3>
        <node3>A4</node3>    
    </node2> 
</node1>

＆＃13;

专注于输入触发两次而不是仅一次触发

1 个答案: