jquery - 输入事件在 Jquery Mobile 和 PhoneGap 中不起作用

Question

这适用于 JSFiddle(参见 http://jsfiddle.net/MygJC/4/)但不想在我的 JQuery Mobile (1.2.1) 和 Phonegap (Cordova 2.3) 应用程序中启动:

<div id='cont-sum-fields'>
    <input type="number" id="cont-sum-1" />
    <input type="number" id="cont-sum-2" />
    <input type="number" id="cont-sum-3" />
    <input type="number" id="total-cont-sum" disabled />

$('div#cont-sum-fields').on('change', 'input', function() {
    var total = 0;
    $(this).parent().children('input[id^="cont-sum"]').each(function() {
        if ($(this).val() !== "") total += parseFloat($(this).val());
    });
    $(this).parent().children('#total-cont-sum').val(total);
});

知道为什么吗？

编辑

这似乎是一个更广泛的问题，涉及为动态插入的 DOM 元素提供 JQuery 事件处理程序。我在插入 DOM 元素后重新触发页面创建，但这还不够。进一步调查。

Answer 1

当然它在 jsFiddle 示例中工作，您没有包括 jQuery Mobile。一旦你初始化它，一切都会刹车。

要了解为什么您需要了解 jQuery Mobile 如何为其表单元素设置样式。当 jQuery Mobile 为其内容设置样式时，它会隐藏所有内容并创建新的自定义小部件元素。这就是为什么您的代码不再起作用的原因。输入元素仍然存在，但它们的结构路径不同。

此示例将在您的 Phonegap 应用程序中运行:http://jsfiddle.net/Gajotres/MygJC/6/

$('div#cont-sum-fields').on('change', 'input', function() {
    var total = 0;
    $('#cont-sum-fields').find('input[id^="cont-sum"]').each(function() {
        if ($(this).val() !== "") total += parseFloat($(this).val())
    });
    $('#cont-sum-fields').find('#total-cont-sum').val(total);
});

这是您的页面在 jQuery Mobile 重新设置样式后的样子:

<div id="cont-sum-fields">
    <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
        <input type="number" id="cont-sum-1" class="ui-input-text ui-body-c"/>
    </div>
    <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
        <input type="number" id="cont-sum-2" class="ui-input-text ui-body-c"/>
    </div>
    <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c">
        <input type="number" id="cont-sum-3" class="ui-input-text ui-body-c"/>
    </div>
    <div class="ui-input-text ui-shadow-inset ui-corner-all ui-btn-shadow ui-body-c ui-disabled">
        <input type="number" disabled="disabled" id="total-cont-sum" class="ui-input-text ui-body-c mobile-textinput-disabled ui-state-disabled" aria-disabled="true"/>
    </div>
</div>