代码之家  ›  专栏  ›  技术社区  ›  Bryce York

使用jQuery iPhone样式复选框蒙皮时,jQuery PCP中的复选框未触发事件

  •  0
  • Bryce York  · 技术社区  · 14 年前

    我已经使用HTML和jQuery构建了一个表单。该表单旨在为用户动态生成报价。

    我还想使用jQuery iPhone样式复选框(iSC)来设置复选框的样式。

    我已经实现了jQuery价格计算器专业版(PCP)以及iSC。当没有实现iSC时,系统会完美工作,但一旦实现iSC,价格变化(见右上角)就不再触发。

    我以为这是因为事件是由点击触发的,从我可以发现的情况并非如此。

    我已经能够实现以下内容,这将使我能够添加一行代码,触发PCP运行所需的任何内容:

    $(window).load(function() {             
    
    var onchange_checkbox = ($('#eCommerce')).iphoneStyle({
        onChange: function() { 
                if ($('#eCommerce').is(':checked')) {
                    $('#eCommerce-Output').removeClass('dispnone');
                    console.log('eCommerce is on');
            } 
                else { 
                $('#eCommerce-Output').addClass('dispnone');
                console.log('eCommerce is off');
                };
        }
    });
    

    正如您将能够在 live version of the page 通过控制台——当iPhone切换时,上述操作会完美触发。

    如果你勾选顶部的unstyled复选框,你就可以看到我想要iPhone开关做什么。计算的相关.js文件 can be found here 。

    我们非常感谢您的帮助。

    2 回复  |  直到 14 年前
        1
  •  2
  •   Ben Martin    14 年前

    每次触发其中一个表单输入的更改事件时,价格都会更新。因此,当iphone样式复选框更改时,我们需要手动触发此事件。

    编辑: iPhone样式复选框实际上将复选框元素作为第一个参数传递给onChange函数。this关键字将无法按预期工作。我已经相应地更新了我的答案。

    var onchange_checkbox = ($('#eCommerce')).iphoneStyle({
        onChange: function(input) { 
            input.trigger('change');
        }
    });
    

    我希望这能有所帮助!

    本。

        2
  •  0
  •   Beetroot-Beetroot    14 年前

    检查widgetized DOM使我相信以下内容应该有效:

    $(function() {             
        var onchange_checkbox = ($('#eCommerce')).iphoneStyle({
            onChange: function() { 
                $(this).closest('.iPhoneCheckContainer').find('input').trigger('change');
            }
        });
    });
    

    如果它有效,这将是一个通用的解决方案,因为“onChange”处理程序:

    • 对元素id不做任何假设
    • 相对于单击的小部件工作,以找到底层输入元素(checkbox/radiobutton),小部件是从该元素创建的(并且仍然存在),并触发其更改事件。