Question

我希望将点击事件附加到＆＃39; buttonID＆＃39; 选择器以及＆＃39; onChange＆＃39;活动到了'dropDownID＆＃39;选择器，因为对于这两个事件，我想执行相同的处理程序方法。我厌倦了下面的代码，但是发生了什么是click和change事件被绑定到BOTH按钮和dropDown，所以为了在dropDown中选择一个值，我点击它然后在dropDownBox的值被改变之后AJAX被触发和agian＆＃ 39; ll生成另一个ajax调用。当我尝试从dropDown中选择一个值时，会触发两次有效的Ajax。这不是所需的功能。如下所示，我的目的是绑定按钮以单击并更改为dropDown。有一种方法，我可以使用javascript或jQuery实现这一点？我正在使用我想要这个功能的JSP页面。 $（＆＃39; #buttonId＃dropDownId＆＃39;）。bind（＆＃39;点击更改＆＃39;功能（事件）） { AJAX处理程序方法执行某些操作。 }）;

点击here，了解使用虚拟数据创建的演示小提琴，以便进行说明。

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/

Answer 2

试试这个：使用多个选择器并给出逗号分隔的按钮和下拉列表ID列表。此外，.on()方法是将事件处理程序附加到.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

将一些类分配给要为其分配事件的元素，并在选择器中使用此类。稍后可能会添加其他需要分配相同事件的元素，在这种情况下，您只需要为元素分配相同的类。

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

});

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

3 个答案:

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