2

我正坐在一段代码上，这在移动设备上是超慢的。

我在 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>

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

作为一种解决方法，我现在绑定到最接近的ui-btn，如下所示：

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

这至少使元素可点击，但它仍然很慢。

我一直在查看与本机 Javascript 方法（如此处jsPerf）进行比较的示例。如果我假设性能差异为 1:10（就像从台式机切换到移动设备时一样，我很确定我的“最近”调用会减慢速度。closest

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

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

// 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 );
                }
            });
        },

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

再次感谢！

4

1 回答 1

3

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

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

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

或者如果你绑定到 div：

$(myForm).on("vclick", "div.ui-btn", function(event){...});
于 2012-11-18T19:59:47.993 回答