javascript - 在 jquery 中将多个事件附加到单个处理程序的多个元素

Question

我想将一个click事件附加到'buttonID'选择器并将一个'onChange'事件附加到'dropDownID'选择器，因为对于这两个事件我想要执行相同的处理程序方法。我厌倦了下面的代码，但发生的是点击和更改事件被绑定(bind)到按钮和下拉列表，所以为了在下拉列表中选择一个值，我单击它并且触发 AJAX 并且在更改 dropDownBox 的值后 agian 它将生成另一个 ajax称呼。当我尝试从下拉列表中选择一个值时，With-effect Ajax 被触发了两次。这不是所需的功能。如下所示，我的意图是将按钮绑定(bind)到单击并更改为 dropDown。有没有一种方法可以使用 javascript 或 jQuery 完成此操作？我正在使用需要此功能的 JSP 页面。$('#buttonId #dropDownId').bind('点击更改'函数(事件)){ AJAX 处理程序方法来执行某些操作。});

点击here为演示目的使用虚拟数据创建的演示 fiddle 。

html:

     <input type="text" id= "accountId" name="account"/>
    <input type="button" id="buttonId"> Submit </input>
                        <br>    
     <select id= "accountType">
    <option value="COM" selected="true">COM </option>            
    <option value="CUR">CUR</option>             
    </select>
   <br>     
    <table id="myTable1">
    <thead>
                        <tr>
                            <th> <strong> something1</strong></th> 
                            <th> <strong>something2</strong></th> 
                         </tr>
                         </thead> 

                <tbody id="TbodyId"></tbody>
    </table>

JS:

            var a = $("#accountType");
    var b = $('#buttonId');
    var $combinedEvent = a.add(b) ;

    console.log("combined event" + $combinedEvent);

    $combinedEvent.bind('click change', function( event ){
    console.log("do something here");
        $('#myTable1').append('<tr><td> one  <td>        
           <td> two </td> </tr>');
       });

Answer 1

我不认为您可以在此处使用任何智能快捷方式。我能想到的最好的方法是将功能提取到单独的函数中，并将其作为 onclick 和 onchange 的事件处理程序传递:

function action() {
    $('#myTable1').append('<tr><td> one<td><td> two </td> </tr>');
}

$("#accountType").on('change', action);
$('#buttonId').on('click', action);

演示:http://jsfiddle.net/Lv08z60m/