如果我关闭模式，JQuery .click 功能仅在第二次单击后才有效答案

【问题标题】：JQuery .click function only works after second click if I close a modal如果我关闭模式，JQuery .click 功能仅在第二次单击后才有效
【发布时间】：2014-01-16 15:22:25
【问题描述】：

我有一个页面，其中有两个按钮，一个用于打开模式，另一个仅用于提交。

我在第二个按钮上有一个 .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>

【问题讨论】：

标签： javascript jquery html validation twitter-bootstrap

【解决方案1】：

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

按钮 1 可能只是一个按钮

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

【讨论】：

嗨，我需要提交它，因为在模式中我有一些输入要发送
我们能看到表单的完整 HTML 语法吗？
是的，你不应该在一个表单中有 2 个提交按钮。两者是否同时显示？
不，一个在模态，另一个在外面。我怎么能这样做，我必须有两个表格？
将模态框移到表单外。

【解决方案2】：

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

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

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

【讨论】：