Combine/bind many on change, on click event of many tags with different id or class

In my view I have many tags with differents classed and ids like this:

<!-- 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>

Using jQuery, I would like to catch all clicks, changes of these tags, more precisely if user click on a <li></li> tag with class .getState, or if user have selected an option of the <select></select> tag which has the id #isProduction or if user have click on the other <button></button> tag which have <a href="#validity"> or <a href="#rate">.

Like this example:

<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>

Here I could make a request (PHP server side) by recovering the state, then I could make a request with this argument.

How can I combine all these event in only one function in order to recover all the argument I need for my PHP server side using jQuery?

I see on the doc here, that we could create a bind on multiple event like this:

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

If I understand correctly you want to attach same event to multiple elements, if yes that could be done using comma separator ,:

$('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;
        }
    });
})

NOTE : For the two buttons better if you could add a class to them so you will attach event just to them button.my-btn instead of attaching it to button so that will not infect other buttons click event.

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

Or also you could use separated function and attach events separately but trigger the same action :

$('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;
        }
    });
}

Hope this helps.

$('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>