Javascript 如何启用编辑模式，单击编辑按钮时信息消失

我有一个用户/联系人列表，每行末尾都有一个编辑和删除按钮。“删除”按钮正常工作，但单击“编辑”按钮时，信息行将消失，并且不会进入编辑模式。刷新页面时，信息行返回。我已经为此工作了一段时间，但似乎无法理解为什么会发生这种情况。我已经将它与网站的其他代码进行了比较，在这些代码中，编辑模式确实起作用，而且都是正确的，但这种情况仍然存在。我已尝试console.log-ing，没有报告错误。我以前发布过： 有人对为什么会发生这种情况有什么理论吗

HTML代码：

<template name="SingleContact">
  {{#if editMode}}
    <form class="editForm">
      <td class="input-field">
        <input id="full_name" name="full_name" value="{{fullname}}" 
        type="text" class="validate" />
      </td>
      <td class="input-field">
        <input id="email" name="email" value="{{email}}" 
        type="email" class="validate" />
      </td>
      <td class="input-field">
        <input id="phone" name="phone" value="{{phone}}" type="tel" 
        class="validate" />
      </td>
      {{#if customerIsEnterprise}}
        <td>
          <p>
            {{#if clientContact}}
            <input type="checkbox" id="primaryContact" 
            name="primaryContact" checked="checked" />
            {{else}}
            <input type="checkbox" id="primaryContact" 
            name="primaryContact" />
            {{/if}}
            <label for="primaryContact">Primary Contact?</label>
          </p>
        </td>
      {{/if}}
    </form>
  {{else}}
    <tr>
      <td>{{fullname}}</td>
      ...
       <td class="button-cell"><a class="edit btn waves-effect 
       waves-light" href="#">Edit<i class="material-icons 
       right">mode_edit</i></a></td>
       ...      
    </tr>
  {{/if}}
</template>

最低限度的HTML：

<template name="SingleContact">
  {{#if editMode}}
    <form class="editForm">

      <tr class="input-field">
        <input id="full_name" name="full_name" value="{{fullname}}" type="text" class="validate" />
      </tr>
    </form>
  {{else}}
    <tr>
      <td>{{fullname}}</td>
      <td>{{email}}</td>
      <td>{{phone}}</td>
      <td>{{phone2}}</td>
  <td class="button-cell"><a class="edit btn waves-effect waves-light" href="#">Edit<i class="material-icons right">mode_edit</i></a></td>
      <td class="button-cell"><a class="modal-trigger waves-effect waves-light btn red" href="#contactModal{{_id}}">Delete<i class="material-icons right">delete</i></a></td>
        </tr>
    {{/if}}
</template>

{{{#如果编辑模式}
{{else}
{{fullname}}
{{email}}
{{phone}}
{{phone2}}
{{/if}

您很可能有HTML问题：

• {{{if editMode}}

  模板条件的两个块是不等价的：

  {{else}

  块正确地包含了
  表行，而另一个不包含

• 不能有除thead、tbody、tfooter或directive tr以外的直接子项。大多数浏览器将删除（提升）不在此列表中的元素，这些元素可能适用于您的
  标记。通常的解决方法是放置一个单独的表单来包装整个表，或者如果您实际上不依赖表单标记来http发布表单数据（但您也会丢失“按enter键”提交表单功能），则删除表单标记，这可能是您的情况，因为您使用Meteor处理应用程序，并且可能不希望重新加载页面来记录修改

---

您很可能有HTML问题：

• {{{if editMode}}

  模板条件的两个块是不等价的：

  {{else}

  块正确地包含了
  表行，而另一个不包含

• 不能有除thead、tbody、tfooter或directive tr以外的直接子项。大多数浏览器将删除（提升）不在此列表中的元素，这些元素可能适用于您的
  标记。通常的解决方法是放置一个单独的表单来包装整个表，或者如果您实际上不依赖表单标记来http发布表单数据（但您也会丢失“按enter键”提交表单功能），则删除表单标记，这可能是您的情况，因为您使用Meteor处理应用程序，并且可能不希望重新加载页面来记录修改

---

只要模板的HTML部分没有代码，您的描述就很难理解。请添加它（排除无关部分）。添加HTML，谢谢！只要模板中没有HTML部分的代码，您的描述就很难理解。请添加它（排除无关部分）。添加HTML，谢谢！非常感谢。我测试了不同的html模式。我在问题部分更新了最基本的HTML。我已经拿出标签，并尝试将其更改为标签等，但不幸的是，我仍然得到相同的结果。当我点击编辑btn时，信息消失。只是那一行消失了，而不是整个屏幕。我不知道你到底做了什么，得到了什么结果。在新的HTML中，不要忘记行下的单元格，并去掉。顺便说一句，内联行编辑的常用实现是切换（如果/否则）行中每个单元格（文本/输入）的内容，而不是更改行。谢谢！我测试了不同的html模式。我在问题部分更新了最基本的HTML。我已经拿出标签，并尝试将其更改为标签等，但不幸的是，我仍然得到相同的结果。当我点击编辑btn时，信息消失。只是那一行消失了，而不是整个屏幕。我不知道你到底做了什么，得到了什么结果。在新的HTML中，不要忘记行下的单元格，并去掉。顺便说一句，内联行编辑的常用实现是切换（if/else）行中每个单元格（文本/输入）的内容，而不是更改行。

<template name="SingleContact">
  {{#if editMode}}
    <form class="editForm">

      <tr class="input-field">
        <input id="full_name" name="full_name" value="{{fullname}}" type="text" class="validate" />
      </tr>
    </form>
  {{else}}
    <tr>
      <td>{{fullname}}</td>
      <td>{{email}}</td>
      <td>{{phone}}</td>
      <td>{{phone2}}</td>
  <td class="button-cell"><a class="edit btn waves-effect waves-light" href="#">Edit<i class="material-icons right">mode_edit</i></a></td>
      <td class="button-cell"><a class="modal-trigger waves-effect waves-light btn red" href="#contactModal{{_id}}">Delete<i class="material-icons right">delete</i></a></td>
        </tr>
    {{/if}}
</template>