在点击时出现一个div，jquery

Posted 2023-03-16

【中文标题】在点击时出现一个div，jquery

【英文标题】：make a div appear on click, jquery

【发布时间】：2021-04-13 14:19:22

【问题描述】：

我正在 ruby​​-sinatra 中构建一个应用程序，它允许您创建帖子然后回复帖子。我正在尝试在用户单击回复时显示回复帖子的表单。但是，目前我的代码仅适用于正在呈现的第一个消息 div。所有其他人都有使表单出现的按钮，但它们不起作用。

这是我的 .erb

<div class="message-link more ">
  <div class="comment-square">
    <% message.comments.each do |comment| %>

      <% comment.users.each do |user| %>
      <div><h5><%= user.username %></h5></div>
 
      <% end %>

      <script type="text/javascript">     
        $("#button").click(function() 
        $("#fn").show();
        $("#ln").show();
      );
      </script>
                    
      <p class="comment-text"><%= comment.text %>
        <input id="button" type="button" value="Reply"><br>
      </p>
        <div id="fn" hidden><input type="text" /></div><br>

      <% end %>
    </div>
 </div>

谁能看出原因？

【问题讨论】：

***.com/questions/14028959/…

你在按钮被渲染之前绑定了按钮。

您还拥有循环中的代码，因此您将拥有多个具有相同 id 的元素。那是行不通的。

@epascarello 对修复有什么建议吗？

【参考方案1】：

您在渲染之前引用了按钮，因此它不会找到它。下一个问题是您将代码放在一个循环中，因此您将生成一堆具有相同 id 的元素。

改为使用事件委托来捕获按钮点击。您可以使用它来查找要显示的元素。

$(".message-link").on("click", "input.reply", function () 
  $(this).closest('.comment-square').find(".fn").toggle();
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="message-link more ">
  <div class="comment-square">
    <div>
      <h5>XXX</h5>
    </div>
    <p class="comment-text">Foo Bar
      <input class="reply" type="button" value="Reply"><br>
    </p>
    <div class="fn" hidden><input type="text" /></div><br>
  </div>
  <div class="comment-square">
    <div>
      <h5>XXX</h5>
    </div>
    <p class="comment-text">Foo Bar
      <input class="reply" type="button" value="Reply"><br>
    </p>
    <div class="fn" hidden><input type="text" /></div><br>
  </div>  
</div>

脚本应该出现在message-link div 之后或被包装在准备好的文档中。

【讨论】：

我会使用$(document).on("click", ".message-link input.reply", function () ..) 代替文档中的事件委托，而不是将处理程序直接附加到元素。

@max 所以它必须冒更多的泡沫？如果两个元素都是动态的，则只有将其上移的理由。

如果<div class="message-link more ">是动态的，是，如果不是，不是，不需要做。

幂等性本身是一件好事，是一个很好的未来证明。让事件冒泡的成本是微不足道的，如果有很多元素，您需要权衡将处理程序附加到每个元素的成本。

你的意见与我的意见。祝你有美好的一天。