Question

当前尝试基于用户单击使用JQuery在HTML文档中动态切换内容。

我有一个HTML文档，并且具有以下JQuery代码，该代码根据用户的点击动态切换div的内容。

$(function() {
  $(".uen").on("click", uenSearch);
});

function backButton () {
  $(".search-form, .content-wrapper.back").toggle();
  $(".uen > h3, .uen > p").toggle();
  $(".uen").on("click", uenSearch);
}

function uenSearch () {
  $(".uen > h3, .uen > p").toggle();
  $(".search-form, .content-wrapper.back").toggle();
  $(".uen").off();
  $("#back").on("click", backButton);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Search boxes by UEN & Equipment type -->
<div class="search-box uen">
  <h3>Search by</h3>
  <p>UEN</p>
  <form action="#" method="post" class="search-form">
    <input type="text" placeholder="Enter UEN Number" name="uen_number" 
    required>
    <button type="submit">SEARCH</button>
  </form>
  <div class="content-wrapper back">
    <img src="images/back_arrow-white.svg" alt="back-arrow" width="25">
    <p id="back">Back</p>
  </div>
</div>

但是，一旦用户第一次单击div并更改了内容，则如果用户尝试单击“ #back”段落，则不会触发事件侦听器以将div的内容切换回原始内容

在解决此问题方面的任何帮助将不胜感激。

Answer 1

$(function() {
        $(".uen").on("click", uenSearch);
      });

将其更改为

$(document).on("click", ".uen", uenSearch);

本文进一步讨论了动态元素中的事件列表器： Event binding on dynamically created elements?

动态添加时未触发jQuery事件侦听器

1 个答案: