JQuery .click function only works after second click if I close a modal

Question

i have a page where I have two buttons, one that opens a modal, and another one that only submits.

I have a .click event on the second button. If i go on the page and click the second button the click event goes fine, BUT if i first open the modal, close it and then i hit the second button, the first time does nothing and the second time it fires the .click event.

I would like to always fire the click event.

this is my code

$(document).ready(function(){
var focusout = false;

$(".prueba").click(function () {
    if (focusout == false) {
        focusout = true;
        return;
    }



});
var validator =$('#form1').validate(
 {
  ignore: "",
  rules: {
   parametros: {
        required: function() { return focusout == true; },

    },

    terminos: {
      required: function() { return focusout == true; },
    }
  },

  highlight: function(element) {
    $(element).closest('.grupo').addClass('has-error');

  },
  unhighlight: function(element) {
    $(element).closest('.grupo').removeClass('has-error');
  }
 });
$(".cancel").click(function() {
    validator.resetForm();
});




}); // end document.ready

button 1:

<button type="submit" class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i>   Nuevo Item</button>

button 2:

<button type="submit" class="btn btn-primary prueba" name="buscar">Buscar</button>

full form:

<form action="" method="post" id="form1" enctype="multipart/form-data">

      <p>
        <button type="submit" class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i>   Nuevo Item</button>

        <button type="submit" class="btn btn-primary" name="carga_masiva"><i class="icon-arrow-up"></i>   Carga Masiva</button>
      </p>
      <br> 
      <div class="col-lg-1 grupo">
      </div>
        <div class="col-lg-10 grupo">


      <div class="panel panel-default pagination-centered">
  <div class="panel-heading">Búsqueda en Catálogo</div>
  <div class="panel-body">



              <div class="form-group ">

                    <div class="col-lg-6 grupo">
                      <input type="text" class="form-control " id="terminos" name="terminos" placeholder="Términos de búsqueda">
                    </div>

                    <div class="col-lg-6 grupo">
                     <select id="e1" name="parametros" style=" width:80%">
                           <option></option>
                           <option value="1" >Autor</option>
                           <option value="2" >Título</option>
                     </select>
                    </div>

                   </div>
                   <br> <br> 
                   <div style="text-align:center">
                   <button type="submit" class="btn btn-primary prueba" name="buscar">Buscar</button>
                   </div>


        </div>
        </div>

      </div>
     <div class="col-lg-1 grupo">
      </div>

        <!-- Modal -->
        <div class="modal fade" id="myModal" name="myModal" data-backdrop="static" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
          <div class="modal-dialog modal-wide">
            <div class="modal-content">
              <div class="modal-header">
                <button type="submit"  class="close cancel" data-dismiss="modal" aria-hidden="true">&times;</button>

                {if isset($smarty.post.nueva_articulo) }
                <h4 class="modal-title">Nueva Articulo</h4>
                {/if} </div>
              <div class="modal-body"> 




                {if isset($smarty.post.nueva_articulo) }

                 <div class="form-group">
                    <div class="col-lg-12 grupo">
                      <label for="art_titulo" class="control-label">Título</label>
                      <input type="text" class="form-control input-sm" name="art_titulo">
                    </div>
                 </div>

                 <div class="form-group">
                    <div class="col-lg-12 grupo">
                      <label for="art_enlace" class="control-label">Enlace</label>
                      <input type="text" class="form-control input-sm" name="art_enlace">
                    </div>
                 </div>

                 <div class="form-group">
                    <div class="col-lg-12 grupo">
                      <label for="aut_id" class="control-label">Autor(es)</label>
                      <input type='hidden' id='e13' name="autores" style='width:100%'/>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-lg-12 grupo">
                      <label for="art_contenido" class="control-label">Contenido</label>
                      <textarea class="form-control input-sm" name="art_contenido" rows="5" ></textarea>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-lg-12 grupo">
                      <label for="etiquetas" class="control-label">Etiquetas</label>
                      <input type="text" id="e12" name="etiquetas" style="width:100%"> 
                    </div>
                  </div>

                   <div class="form-group">
                    <div class="col-lg-12 grupo">
                      <label for="foto" class="control-label">Imagen</label>
                      <div class="input-group">
                        <span class="input-group-btn">
                            <span class="btn btn-default btn-file">
                                Buscar… <input type="file" name="foto">
                            </span>
                        </span>
                        <input type="text" class="form-control" name="nombre" readonly="">
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-lg-12 grupo">
                     <div class="checkbox">
                        <label>
                          <input type="checkbox" name="rating" value="si"> Habilitar Rating y Reviews
                        </label>
                      </div>
                      <div class="checkbox">
                        <label>
                          <input type="checkbox" name="redes" value="si"> Habilitar Compatir en Redes Sociales
                        </label>
                      </div>
                    </div>
                  </div>



                {/if} 

             </div>


             <div class="modal-footer">
                <button type="submit" class="btn btn-default cancel" data-dismiss="modal" name="cerrar">Cerrar</button>
                {if isset($smarty.post.nueva_articulo) }
                <button type="submit" class="btn btn-primary" name="insertar_articulo">Guardar Cambios</button>
                {/if}


             </div>
             </div>
            </div>

            <!-- /.modal-content --> 
          </div>
          <!-- /.modal-dialog --> 

        <!-- /.modal -->
      </form>

Answer 1

They are both of type submit . You should only have 1 submit button on a form

Button 1 could just be a button

<button class="btn btn-primary" name="nueva_articulo"><i class="icon-plus"></i> Nuevo Item</button>

Answer 2

If you want, you can create a Form Object in javascript and generate it dynamically. That will do that you don't need to depend of the submit and forms, just fill the form object with the inputs that you want programatically (that even accept files or images).

But anyway, it seems that you have more than one click events on the same button if the one you want is triggering at the second attempt. You could try to play with event.preventDefault or $.unbind.

As you said taht you need to submit the inputs of the modal, try to place the content of the modal inside the tag and remove the submit type of one of the buttons.