0

这适用于 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 元素后重新触发页面创建，但这还不够。进一步调查。

4

2 回答 2

3

当然它在 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>
于 2013-04-29T12:42:39.783 回答
0

好的，所以这里的答案现在似乎很明显，但仍然很有趣。感谢 Gajores 的提示。如果您将动态内容插入到 DOM 中并且将 JQueryon()事件处理程序附加到动态元素，则必须在插入后动态注册事件处理程序。如果 JQueryon()事件处理程序附加到静态 DOM 元素但引用其中的动态元素，则可以在加载 DOM 时附加它，即使动态元素不存在。

我必须说，这是文档并不总是向中级用户很好地解释的东西类型。

于 2013-05-06T06:46:05.723 回答