javascript - 有没有办法在 jQuery 选择器中使用 JavaScript ParentNode 而不是 Closest() ？

Question

我正在查看一段代码，该代码在移动设备上速度非常慢。

我在 Jquery Mobile 中有一个包含大约 40 个输入元素(按钮)的输入表单。在 Jquery Mobile 中，这意味着:

<div class="ui-btn" data-disabled="false">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Button</span>
    </span>
    <input type="button" value="Button" class="ui-btn-hidden" data-disabled="false">
</div>

通常情况下，我可以只绑定(bind)到输入，这在所有 PC 浏览器上都可以正常工作，但是一旦我切换到移动设备并且输入元素的数量增加，按钮就会失效。

作为解决方法，我现在绑定(bind)到最近的 ui-btn，如下所示:

el.jqmData('bound', true )
    .find('input')
    .closest('.ui-btn')
        .on('vclick', function(){
            // do stuff
        });

这至少使元素可以点击，但仍然非常慢。

我一直在查看 jsPerf 示例，将最接近与 native Javascript 方法进行比较(例如 here )。如果我假设性能差异为 1:10(例如从桌面切换到移动设备时 here，我非常确定我的“最近”调用会减慢速度。

我的问题:
有没有办法用原生 Javascript 方法替换我的链式调用中的 closest ？如果是这样，这会是什么样子？

编辑
我已经取出了有问题的功能。这就是我正在做的事情:

// this gets called once for the size entry box 
// sizeEntryBox is the wrapper for $('sizeChart'), which contains the 60 inputs
addSizeHandlers = function( el ){
    el.jqmData('boundStyle', true)
            .find('.sizeChart')
            .on('vclick', '.entry .ui-btn', function(){

                // since I'm listening for .ui-btn I need to get the child input again                
                var qty = $( this ).find('input.qtyInput'),
                    // user can add +1/+2/+4
                    howMany = qty.closest('.ui-collapsible').find('.buttonBar input[name="radio_add"]:checked').val(),
                    qid = qty.attr('id').replace( /qty/, "" );

                // a button may display a preset qty, clicking once replaces this with
                // +1/+2/+4, clicking again adds +1/+2/+4
                if ( qty.jqmData('flag') === false  ){
                    qty.jqmData('flag',true)
                    newVal = parseFloat( howMany );
                    // set new value, add red borders
                    qty.val( howMany ).prev('.ui-btn-inner').addClass("brR").find('.ui-btn-text').html( howMany );
                    $('input[name=menge'+qid+']').val( howMany );
                } else { 
                    newVal = parseFloat( qty.val() ) + parseFloat( howMany );
                    qty.val( newVal ).prev('.ui-btn-inner').addClass("brR").find('.ui-btn-text').html( newVal );
                    $('input[name=menge'+qid+']').val( newVal );
                }
            });
        },

所以我已经绑定(bind)到整个图表并委托(delegate)给按钮。在移动设备上这仍然需要很长时间，因此一些性能消耗者会引起人们的注意，请告诉我。

再次感谢!

Answer 1

我建议使用事件委托(delegate)，并且只为所有输入设置一个点击事件，而不是每个输入一个点击事件:

有关更多详细信息，请参阅 jQuery .on() documentation 中的委托(delegate)事件。您的代码应如下所示:

$(myForm).on("vclick", "input.ui-btn-hidden", function(event){...});

或者如果您绑定(bind)到 div:

$(myForm).on("vclick", "div.ui-btn", function(event){...});