jquery小部件在所有输入中循环

我正在尝试创建我的第一个jquery小部件，它添加了一个“x”来清除输入。它可以工作，但当我点击“x”清除输入时，速度非常慢。我认为这是因为它每次都会循环通过所有的输入，但我不知道如何防止这种情况发生

循环是问题还是其他问题

(function($, undefined) {       
$.widget("jomojo.clearmojo", {
    version: "1.0",
    options: {
        disabled: null,
        icons: {
            primary: null,
            secondary: null
        }
    },

    _create: function(){
        $('input[type=text]').addClass('clearable');
        $('input[type=text]::-ms-clear').css('display', 'none'); 

        this.eventNamespace = "." + this.widgetName + this.uuid;

        function toggle(value){
            return value ? 'addClass':'removeClass';
        };

        this.document
            .on('mouseenter', '.clearable', function(){
                if (options.disabled){
                    return;
                };

                if ($(this).prop('disabled')===false){
                    $(this)[toggle(this.value)]('x');
                };
            })
            .on('mousemove', '.x', function(event){
                $(this)[toggle(this.offsetWidth-18 < event.clientX-this.getBoundingClientRect().left)]('onX');
            })
            .on('mouseleave', '.x', function(){
                $(this).removeClass('x');
            })
            .on('click', '.onX', function(event){
                event.preventDefault();
                $(this).removeClass('x onX').val('').change();
                $(this).trigger('keyup');   
            });
    }, // end create
});
}(jQuery));

---

在Barmar的帮助下，以下是我提出的工作代码。按照他的建议使用toggleClass，并添加了一些条件，以确定代码何时可以处理输入

(function($, undefined) {       
    $.widget("jomojo.clearmojo", {
        version: "1.0",

        _create: function(){
            $('input[type=text]').addClass('clearable');

            this.element
                .on('mouseenter', function(){
                    if ($(this).prop('disabled')===false && $(this).val()!='' && $(this).prop('readonly')===false){
                        $(this).toggleClass('x');
                    };
                })
                .on('mousemove', function(event){
                    if ($(this).prop('disabled')===false && $(this).val()!='' && $(this).prop('readonly')===false){
                        $(this).toggleClass('onX', this.offsetWidth-18 < event.clientX-this.getBoundingClientRect().left);
                    };
                })
                .on('mouseleave', function(){
                    $(this).removeClass('x');
                })
                .on('click', function(event){
                    var elementOffsetWidth=this.offsetWidth
                    var parentOffset=$(this).parent().offset();
                    var relativeX=event.pageX-parentOffset.left;
                    var xOffset=elementOffsetWidth-16

                    if ($(this).prop('disabled')===false && $(this).val()!='' && $(this).prop('readonly')===false && relativeX>xOffset){
                        event.preventDefault();
                        $(this).removeClass('x onX').val('').change();
                        $(this).trigger('keyup');
                    };
                });
        }, // end create
    });
}(jQuery));

---

仅供参考，您的切换函数与jQuery的toggleClass函数类似。它在所有输入中循环的唯一时间是在您创建小部件时。当您单击onX时，我没有看到任何循环。对mousemove之类的事件使用委托可能会降低应用程序的速度。每次你将鼠标移动到任何地方，它都必须运行处理程序并测试鼠标是否在你授权的选择器上。基本问题是，你编写代码的方式不是作为一个小部件。它应该只是一个普通函数。显示基本结构。在小部件工厂中，这是小部件实例，而不是元素，您需要使用this.element来引用元素。我还没有让它完全发挥作用，但它应该会让你走上正轨。

input[type=text]::-ms-clear{
    display: none;
}

.clearable{
    background: #fff url('../images/delete.jpg') no-repeat right -10px center;
    background-size: 10px 8px;
    padding: 0px 0px 0px 0px; 
    transition: background 0.4s;
}

.clearable.x{
    background-position: right 3px center;
}

.clearable.onX{
    cursor: pointer;
}