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

【问题标题】：Input events not working in Jquery Mobile and PhoneGap输入事件在 Jquery Mobile 和 PhoneGap 中不起作用
【发布时间】：2013-05-21 00:38:43
【问题描述】：

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

【问题讨论】：

看看我的回答。
查看jsfiddle.net/Palestinian/MygJC/7
大家好，已解决。我认为我没有提到的关键是包装器 <div id="cont-sum-fields"> 是动态插入的，这意味着 JQuery 事件处理程序只能在元素已插入 DOM 时动态附加。感谢您的帮助。

标签： jquery css html cordova jquery-mobile

【解决方案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>

【讨论】：

对不起，伙计，仍然无法正常工作，即使我只是为不会触发的更改事件发出警报。
将您的更改绑定更改为： $(document).on('change', 'input', function() { ，您可能试图在 id="cont-sum 之前绑定一个事件-fields" 被加载到 DOM 中。

【解决方案2】：

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

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

【讨论】：