组合/绑定许多具有不同id或类的标签的更改，单击事件 - Combine/bind many on change, on click event of many tags with different id or class

在我看来，我有许多标签与不同的分类和id，像这样:

<!-- html view -->
<div class="panel panel-default">
    <ul class="" id="tablist" role="tablist">
        <li class="getState active" id="proposed">
            <a href="#proposed"><b>Proposed</b></a>
        </li>
        <li class="getState" id="current">
            <a href="#current"><b>Current</b></a>
        </li>
        <li class="getState" id="incoming">
            <a href="#incoming"><b>Incoming</b></a>
        </li>
        <li class="getState" id="finished">
            <a href="#finished"><b>Finished</b></a>
        </li>
    </ul>
</div>
<select class="form-control" id="isProduction">
    <option value="" disabled selected>Type</option>
    <option value="production">Production</option>
    <option value="nonProduction">nonProduction</option>
</select>
<div>
    <!-- some content here like <p></p> -->
    <a href="#validity">
        <button class="btn btn-default">Validity</button>
    </a>
</div>
<div>
    <!-- some content here like <p></p> -->
    <a href="#rate">
        <button class="btn btn-default">Rate</button>
    </a>
</div>
<!-- content appear here -->
<div id="info">
    <!-- put some content here following click and selected option change -->
</div>

使用jQuery，我想捕捉所有的点击，这些标签的变化，更准确地说，如果用户点击一个<li></li> 标签与类.getState，或如果用户选择了一个选项的<select></select> 标签具有id #isProduction 或如果用户点击其他<button></button> 标签有<a href="#validity">或<a href="#rate">。

就像这个例子:

<script type="text/javascript" charset="utf-8" defer>
    $('.getState').bind('click', function sortByState(){
        var infoDiv = $('#info');
        $.ajax({
            type: "GET",
            url: window.location.href,
            data: {
              state: $(this).attr("id"),
            },
            success: function(html){
                infoDiv.empty();
                var newinfoDiv = $(html).find('#info');
                infoDiv.append(newinfoDiv);
                infoDiv = newinfoDiv;
            }
        });
    });
</script>

这里我可以通过恢复状态发出请求(php服务器端)，然后我可以用这个参数发出请求。

如何将所有这些事件组合在一个函数中，以便使用jQuery恢复php服务器端所需的所有参数?

我看到在这里的文档中，我们可以像这样在多个事件上创建绑定:

$( "#foo" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass( "entered" );
});

如果我理解正确，您想将相同的事件附加到多个元素，如果是，可以使用逗号分隔符,:

$('body').on('click','#isProduction, .getState, button.my-btn',function(){
    var infoDiv = $('#info');
    $.ajax({
        type: "GET",
        url: window.location.href,
        data: {
          state: $(this).attr("id"),
        },
        success: function(html){
            infoDiv.empty();
            var newinfoDiv = $(html).find('#info');
            infoDiv.append(newinfoDiv);
            infoDiv = newinfoDiv;
        }
    });
})

注意:对于两个按钮，如果你可以添加一个类，这样你就可以将事件附加到它们button.my-btn上，而不是将其附加到button上，这样就不会感染其他按钮，单击事件。

<button class="btn btn-default my-btn">Validity</button>
<button class="btn btn-default my-btn">Rate</button>

或者你也可以使用单独的函数，分别附加事件，但触发相同的动作:

$('body').on('click','.getState, button.my-btn',myAction);
$('body').on('change','#isProduction',myAction);
function myAction(){
    var infoDiv = $('#info');
    $.ajax({
        type: "GET",
        url: window.location.href,
        data: {
          state: $(this).attr("id"),
        },
        success: function(html){
            infoDiv.empty();
            var newinfoDiv = $(html).find('#info');
            infoDiv.append(newinfoDiv);
            infoDiv = newinfoDiv;
        }
    });
}

希望对你有帮助。

$('body').on('click','.getState, button.my-btn',myAction);
$('body').on('change','#isProduction',myAction);
function myAction(){
  alert('myAction');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="panel panel-default">
  <ul class="" id="tablist" role="tablist">
    <li class="getState active" id="proposed">
      <a href="#proposed"><b>Proposed</b></a>
    </li>
    <li class="getState" id="current">
      <a href="#current"><b>Current</b></a>
    </li>
    <li class="getState" id="incoming">
      <a href="#incoming"><b>Incoming</b></a>
    </li>
    <li class="getState" id="finished">
      <a href="#finished"><b>Finished</b></a>
    </li>
  </ul>
</div>
<select class="form-control" id="isProduction">
  <option value="" disabled selected>Type</option>
  <option value="production">Production</option>
  <option value="nonProduction">nonProduction</option>
</select>
<div>
  <!-- some content here like <p></p> -->
  <a href="#validity">
    <button class="btn btn-default my-btn">Validity</button>
  </a>
</div>
<div>
  <!-- some content here like <p></p> -->
  <a href="#rate">
    <button class="btn btn-default my-btn">Rate</button>
  </a>
</div>
<!-- content appear here -->
<div id="info">
  <!-- put some content here following click and selected option change -->
</div>

您可以使用下面的代码来捕获整个页面上的触发点击事件，然后您可以编写所需的代码来执行:

 $('body').bind('click',function(){
//your code here
});