Question

页面加载后，我会使用

隐藏一个包含表单的div

$('#popupPerson').hide();

然后在主体中构建一个表，并在此弹出窗口中使用初始隐藏的表单来帮助插入/更新/删除行数据

<div id="popupPerson" class="popupPerson">
  <form id="form_popup_person" action="person_update" method="post">
    <fieldset>
      <legend>Person</legend>
      <label for="id">id</label>&nbsp;<input name="id" type="number" />&nbsp;&nbsp;
      <label for="revision">revision</label>&nbsp;<input name="revision" type="number" /><p>
      <label for="lastName">lastName</label>&nbsp;<input name="lastName" type="text" />&nbsp;&nbsp;
      <label for="firstName">firstName</label>&nbsp;<input name="firstName" type="text" /><p>
      <label for="street">street</label>&nbsp;<input name="street" type="text" />&nbsp;&nbsp;
      <label for="city">city</label>&nbsp;<input name="city" type="text" /><p>
      <label for="county">county</label>&nbsp;<input name="county" type="text" />&nbsp;&nbsp;
      <label for="state">state</label>&nbsp;<input name="state" type="text" />&nbsp;&nbsp;  
      <label for="postalCode">postalCode</label>&nbsp;<input name="postalCode" type="text" /><p>  
      <label for="birthDate">birthDate</label>&nbsp;<input name="birthDate" type="text" />&nbsp;&nbsp;  
      <label for="email">email</label>&nbsp;<input name="email" type="text" />&nbsp;&nbsp;       
      <label for="status">status</label>&nbsp;<input name="status" type="text" /><p> 
      <input name="submit" type="submit" value="Submit" />
      <input name="cancel" type="submit" class="cancel" value="Cancel" />
      <button type="button" class="cancel" onClick="this.parent.close();">Cancel button</button>
      <button type="button" class="cancel" onClick="$(this).parent().parent().hide();">parent parent hide button</button>
      <button type="button" class="cancel" onClick="$(this).parent().hide();">parent hide button</button>  <!-- makes ALL BUTTONS DISAPPEAR -->
      <button type="button" class="cancel" onClick="$(this).hide();">hide button</button>         <!-- makes the BUTTON ITSELF DISAPPEAR -->       
    </fieldset>
  </form>
</div>

和一些js，因此如果单击表中的行，则会触发并显示div

$('#popupPerson').show();

我想在表单上添加一个“取消”按钮，以简单地关闭/隐藏div-不提交，不重置。

Answer 1

您可以简单地写为

 <button type="button" class="cancel" onClick="$('#popupPerson').hide();">Cancel</button>

Answer 2

我将使用以下命令：<button type="button" class="cancel" onClick="$(this).closest('.popupPerson').hide();">parent parent hide button</button>关闭包含的.popupPerson，以防您在页面上需要多个。

或者，您可以将其放在脚本中：

$(function(){
  $(document).on('click','.popupPerson .cancel', function(){
    $(this).closest('.popupPerson').hide();
    // Do whatever else you want here, like eat the event (stopPropegation, etc).
  });
});

这是元素：

<a class="cancel">parent parent hide button</a>

隐藏/关闭由.show（）打开的div

2 个答案: