Question

JQM页面'operator-modify'。
在页面内填写“用户形式”。
表单内的一些控件（文本输入等）。

是否可以为这些控件注册事件处理程序ONCE？跟踪表单控件内的任何更改都会很棒。如果可能 - 怎么做？

以下代码片段：

<div data-role="page" id="operator-modify" data-theme="b">

    <div data-role="content">

        <form id="user-form">
            <label for="user-id-name">ID:</label>
            <input type="text" name="user-id-name" id="user-id-m" data-clear-btn="true"/>
            <label for="user-title-name">Name:</label>
            <input type="text" name="user-title-name" id="user-title-m" data-clear-btn="true"/>
            <label for="user-role-name">Role:</label>
            <input type="text" name="user-role-name" id="user-role-m" data-clear-btn="true"/>
        </form>
    </div>
</div>

注册3个相同的事件处理程序并不困难，但它似乎是不灵活的解决方案。

Answer 1

你可以使用类似这样的事件委托：

$("#user-form").on("click", 'input[type="text"]', function (e) {
    // `this` refers to the element that was clicked
    // `e.delegateTarget` refers to the element this event is actually bound to (the form)
});

DEMO： http://jsfiddle.net/Nz6e8/

将一个click事件绑定到form[id="user-form"]元素，但仅对其中的input[type="text"]元素执行。

根据您要将事件绑定到目标的位置以及您想要定位的内容，您可以更改选择器，但应该完成您想要的任务。

参考：

http://api.jquery.com/on/#direct-and-delegated-events

Answer 2

是的，你可以。试试这个http://jsfiddle.net/UC952/

$('input[type="text"]', 'div[data-role="content"]').keydown(function () {
    console.log($('label[for="' + $(this).attr("name") + '"]', 'div[data-role="content"]').text() + ' changed.');
});

和更通用的： - event.target将为您提供触发表单内事件的元素。

$('#user-form').keydown(function (event) {
   var elem = $(event.target);
    console.log($('label[for="' + elem.attr("name") + '"]', 'div[data-role="content"]').text() + ' changed.');
});

事件处理程序为多个控件注册了一次 - 是否可能？

2 个答案: