列出的项目不再可以切换。这是为什么？

Question

我现在用jQuery编码。我了解了.replaceWith（）;今天凌晨。当我点击我的按钮时，它会切换到“未来日期”，然后按钮变为“当前日期”。它还将第一个列出的项目从“Mini Sprint”切换到“Snowball Sprint”。但当我点击我的按钮回到“当前日期”时，它不再允许我切换它。有人可以解释为什么这不能正确显示给我？谢谢。

$(document).ready(function() {

  //Hide everything with the class of races.
  $(".races").hide();

  //First image should show and hide.
  $("#first").click(function() {
    $("#5k").toggle();
    $(".firstmini").hide();
    $(".firstmini2").hide();
    $(".firstmini3").hide();
  });

  //5k/10k Events' firstlist should show its children when clicked.
  $("#firstlist").click(function() {
    $(".firstmini").toggle();
    $(".firstmini2").hide();
    $(".firstmini3").hide();
  });

  //5k/10k Events' firstlist2 should show its children when clicked.
  $("#firstlist2").click(function() {
    $(".firstmini2").toggle();
    $(".firstmini").hide();
    $(".firstmini3").hide();
  });

  //5k/10k Events' firstlist3 should show its childern when clicked.
  $("#firstlist3").click(function() {
    $(".firstmini3").toggle();
    $(".firstmini").hide();
    $(".firstmini2").hide();
  });

  $(".change").click(function() {

    var $this = $(this);
    $this.toggleClass("Future Dates");

    if ($this.hasClass("Future Dates")) {
      $this.text("Current Dates");
      $("#firstlist").replaceWith("<li id='firstlist'>Snowball Sprint</li>");
    } else {
      $this.text("Future Dates");
      $("#firstlist").replaceWith("<li id='firstlist'>Mini Sprint</li>");
    }

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="change">Future Dates</button>
<div class="race_box">
  <img id="first" src="images/run1.jpg" />
  <br />
  <figcaption>5k/10k Events</figcaption>

  <div class="races" id="5k">
    <h3>5k/10 Events</h3>
    <ul>
      <li id="firstlist">Mini Sprint
        <ul class="firstmini">
          <li>10/30/17 Memorial Park Appleton</li>
        </ul>
      </li>

      <li id="firstlist2">Iron Horse
        <ul class="firstmini2">
          <li>11/06/17 Bay Beach Park Green Bay</li>
        </ul>
      </li>

      <li id="firstlist3">Twilight Trail
        <ul class="firstmini3">
          <li>11/13/17 River's Edge Park Wrightstown</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

Answer 1

当您使用replaceWith()时，它会删除您具有事件绑定的元素。您可以使用事件委派，如Event binding on dynamically created elements?中所示。但由于您只想更改项目的文字，请使用.text()代替replaceWith()。

另外，请勿尝试在类名中添加空格，例如toggleClass("Future Dates")。空格是类之间的分隔符。

当您切换#firstlist的内容时，您不再看到子菜单的原因是因为您正在替换整个<li>，而不仅仅是文本开头的文本。最简单的解决方案是将该文本放入范围，并更改其文本。

＆＃13;

＆＃13;

$(document).ready(function() {

  //First image should show and hide.
  $("#first").click(function() {
    $("#5k").toggle();
    $(".firstmini").hide();
    $(".firstmini2").hide();
    $(".firstmini3").hide();
  });

  //5k/10k Events' firstlist should show its children when clicked.
  $("#firstlist").click(function() {
    $(".firstmini").toggle();
    $(".firstmini2").hide();
    $(".firstmini3").hide();
  });

  //5k/10k Events' firstlist2 should show its children when clicked.
  $("#firstlist2").click(function() {
    $(".firstmini2").toggle();
    $(".firstmini").hide();
    $(".firstmini3").hide();
  });

  //5k/10k Events' firstlist3 should show its childern when clicked.
  $("#firstlist3").click(function() {
    $(".firstmini3").toggle();
    $(".firstmini").hide();
    $(".firstmini2").hide();
  });

  $(".change").click(function() {

    var $this = $(this);
    $this.toggleClass("future-dates");

    if ($this.hasClass("future-dates")) {
      $this.text("Current Dates");
      $("#firstlist .label").text("Snowball Sprint");
    } else {
      $this.text("Future Dates");
      $("#firstlist .label").text("Mini Sprint");
    }

  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="change">Future Dates</button>
<div class="race_box">
  <img id="first" src="images/run1.jpg" />
  <br />
  <figcaption>5k/10k Events</figcaption>

  <div class="races" id="5k">
    <h3>5k/10 Events</h3>
    <ul>
      <li id="firstlist"><span class="label">Mini Sprint</span>
        <ul class="firstmini">
          <li>10/30/17 Memorial Park Appleton</li>
        </ul>
      </li>

      <li id="firstlist2"><span class="label">Iron Horse</span>
        <ul class="firstmini2">
          <li>11/06/17 Bay Beach Park Green Bay</li>
        </ul>
      </li>

      <li id="firstlist3"><span class="label">Twilight Trail</span>
        <ul class="firstmini3">
          <li>11/13/17 River's Edge Park Wrightstown</li>
        </ul>
      </li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;