时间戳

首页 > 解决方案 > 尝试使用 jQuery 在动态生成的内容下显示输入

jquery - 尝试使用 jQuery 在动态生成的内容下显示输入

问题描述

我正在尝试将来自#modifyForm 的输入（默认情况下不显示）显示在单击链接修改的卡片下。目前，它只能在第一张卡片下或同时在所有卡片下切换。任何帮助将不胜感激。

<div class="row rowcards">
           {% for community in data %}
          <div class="col-md-3" id="removable">
            <div class="card"> 
              <div class="card-body">
                <a href="#" id="threedot" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
                <!-- menu -->
                <div class="dropdown-menu">
                  <p class="text-center"><a href="#" class="modifylink">{{ 'Modifiy' | trans }}</a></p>
                  <p class="text-center"><a href="#" data-id="{{community.id}}" class="text-danger deletelink"><i class="fas fa-trash-alt"></i>{{ 'Delete' | trans }}</a></p>
                </div>
                <p class="card-title">{{ community.info.name }}</p>
                <p class="card-text"><i class="fas fa-users"></i> 4 membres</p>
                <div class="text-center"> 
                 <button class="btn btn-primary btn-card"><i class="fas fa-user-plus"></i> {{ 'Add member' | trans }}</button>
            </div>
          </div>
        </div>
        <form data-id="{{community.id}}" id="modifyForm">
          <div class="form-group modifyform">
            <small class="form-text text-muted">Changez le nom de votre communauté</small>
            <input type="text" class="form-control" required>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      {% endfor %}

jQuery：

$(document).on('click', '.modifylink', function() { 
$('#removable #modifyForm').toggle(500)
});

标签： jquerytwitter-bootstrap

解决方案

  • 这是因为Id应该是唯一的所以不要对多个元素使用相同的 id .. 将id任何循环中的所有 s 更改为classs

  • 然后你可以使用$(this).closest('.removable').find('.modifyForm').toggle(500)

推荐阅读