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

Question

I want a click event to be attached to 'buttonID' selector and an 'onChange' event to the 'dropDownID' selector, because for both of these events I want to execute the same handler method. I tired the below code but what happens is the click and change event is bound to BOTH button and dropDown, so for selecting a value in dropDown I click it and AJAX gets triggered and agian after the dropDownBox's value is changed it'll generate another ajax call. With-effect Ajax is triggered two times when I try to choose a value from the dropDown. This is not the desired function. As seen below my intention was to bind the button to click and change to dropDown. There there a way I can accomplish this using javascript or jQuery ? I'm using a JSP page where I want this functionality. $('#buttonId #dropDownId').bind('click change' function( event )) { AJAX handler method to perform something. });

Click here for the demo fiddle created with dummy data for illustration purpose.

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

I don't think there is any smart shortcut you can use here. The best I can think of is to extract functionality into separate function and pass it as event handler for both onclick and onchange :

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

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

Demo: http://jsfiddle.net/Lv08z60m/

Answer 2

Try this : use multiple selector and give comma seperated list of id of button and dropdown. Also, the .on() method is the preferred method for attaching event handlers to a document over .bind() .

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

Answer 3

Assign some class to the elements to which you want to assign events, and use this class in the selector. Later there may be added other elements which need the same events to be assigned, and in this case you will need just assign the same class to the element.

$(".myClassForEvents").on("click change", function(event){

});