Fire Jquery function when button is clicked

Question

I have the following function:

<script type='text/javascript'>
          $(document).ready(function(){
               $("input[name='numeroRg']").blur(function(){
                    var $nomePaciente = $("input[name='nomePaciente']");
                    var $dataNascPaciente = $("input[name='dataNascPaciente']");
                    .....

At the moment, it is being fired when the input named after numeroRGloses the focus, i would like it to be fired when the user clicks on button pesquisarName

<form>
     <div class="tab-content"> 
          <div role="tabpanel" class="tab-pane fade in active" id="htab1">
               <div class="row" style="padding-top: 15px;">
                    <div class="col-xs-4">
                         <div class="form-group">
                              <label for="numeroRg">RG:</label>
                              <input type="text" class="form-control" name="numeroRg" id="rg" placeholder="__.___.___-_">
                         </div> 
                         <button class="btn btn-info" name="pesquisarName" id="pesquisarId">Pesquisar</button>
                    </div>  
               </div>
          </div> 
</form>

I’ve tried to put it this way, but it didn’t work:

<script type='text/javascript'>
          $(document).ready(function(){
               $("button[name='pesquisarName']").click(function(){
                    var $nomePaciente = $("input[name='nomePaciente']");
                    var $dataNascPaciente = $("input[name='dataNascPaciente']");
                    .....

Answer 1

For the purpose of testing on "Run" I omitted the tag form

You can call function by ID using .click()

You can fire the function at the click of the button with id="pesquisarId" replacing the line

$("input[name='numeroRg']").blur(function(){

by this line

$('#pesquisarId').click(function() {

$(document).ready(function(){
    $('#pesquisarId').click(function() {
       //.......
       //.......
       //para testar
       console.log('Botão id="pesquisarId" clicado e função disparada');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


     <div class="tab-content"> 
          <div role="tabpanel" class="tab-pane fade in active" id="htab1">
               <div class="row" style="padding-top: 15px;">
                    <div class="col-xs-4">
                         <div class="form-group">
                              <label for="numeroRg">RG:</label>
                              <input type="text" class="form-control" name="numeroRg" id="rg" placeholder="__.___.___-_">
                         </div> 
                         <button type="button" class="btn btn-info" name="pesquisarName" id="pesquisarId">Pesquisar</button>
                    </div>  
               </div>
          </div>
       </div>

Answer 2

Your button is submitting the form, you have two alternatives, unsubscribe, change the button type.

Unsubscribe

$(document).ready(function(){
               $("#ev").submit(function(ev){
                    ev.preventDefault();
                    	alert('seu evento');
                    });
                   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="ev">
     <div class="tab-content"> 
          <div role="tabpanel" class="tab-pane fade in active" id="htab1">
               <div class="row" style="padding-top: 15px;">
                    <div class="col-xs-4">
                         <div class="form-group">
                              <label for="numeroRg">RG:</label>
                              <input type="text" class="form-control" name="numeroRg" id="rg" placeholder="__.___.___-_">
                         </div> 
                         <button class="btn btn-info" name="pesquisarName" id="pesquisarId">Pesquisar</button>
                    </div>  
               </div>
          </div>
       </div>
</form>

Adding a type to button

$(document).ready(function(){
               $("button[name=pesquisarName]").click(function(ev){
                    	alert('seu evento');
                    });
                   });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
     <div class="tab-content"> 
          <div role="tabpanel" class="tab-pane fade in active" id="htab1">
               <div class="row" style="padding-top: 15px;">
                    <div class="col-xs-4">
                         <div class="form-group">
                              <label for="numeroRg">RG:</label>
                              <input type="text" class="form-control" name="numeroRg" id="rg" placeholder="__.___.___-_">
                         </div> 
                         <button type="button" class="btn btn-info" name="pesquisarName" id="pesquisarId">Pesquisar</button>
                    </div>  
               </div>
          </div>
       </div>
</form>