Question

我有一个页面，其中有两个按钮，一个打开一个模态，另一个只提交。

我在第二个按钮上有一个.click事件。如果我进入页面并单击第二个按钮，单击事件就可以了，但是如果我先打开模态，关闭它然后我点击第二个按钮，第一次什么都不做，第二次触发.click事件

我想一直触发点击事件。

这是我的代码

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

按钮1：

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

按钮2：

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

完整形式：

<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

它们都是submit类型。您应该只在表单上有1个提交按钮

按钮1可以只是一个按钮

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

Answer 2

如果需要，可以在javascript中创建表单对象并动态生成它。这样做你不需要依赖提交和表单，只需用编程的输入填充表单对象（甚至接受文件或图像）。

但无论如何，如果你想要的那个在第二次尝试时触发，你似乎在同一个按钮上有多个点击事件。您可以尝试使用event.preventDefault或$ .unbind。

正如你所说，你需要提交模态的输入，尝试将模态的内容放在标签内，并删除其中一个按钮的提交类型。

如果我关闭模式，JQuery .click函数仅在第二次单击后才起作用

2 个答案: