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>

Answer 2

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

我必须说，这是文档并不总能很好地解释给中间用户的类型。

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

2 个答案: