如何在文本中实现两种语言？

Question

这个问题已有答案：Event binding on dynamically created elements?

我有一个页面，其中有一些文本需要用两种语言。这是我的代码：

$('#english').hide();

$('#enButton').on('click', function() {

  $('#english').fadeIn();
  $('#french').fadeOut();

});

#french {
  margin-top: 40px;
}

#english {
  display: block;
  position: absolute;
  top: 90px;
  left: 150px;
}

#frButton {
  top: 30px;
  left: 145px;
  position: absolute;
  cursor: pointer;
}

#enButton {
  top: 30px;
  position: absolute;
  right: 135px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="content">
  <div id="container">
    <div id="about" class="sections">
      <div id="frButton">
        <p>FRA</p>
      </div>
      <div id="enButton">
        <p>ENG</p>
      </div>
      <div id="textContainer">
        <div id="french">
          <p>Text in French.... </p>
        </div>
        <div id="english">
          <p>Text in English...</p>
        </div>
      </div>
      <!-- end of textContainer -->
    </div>
  </div>
  <!-- end of content -->
</section>
<!-- end of container -->

最后两条规则适用于按钮：当单击“English”按钮时，我想触发一些jQuery，以隐藏法语文本并使英文出现，然后在单击“frButton”时执行相反的操作——但是这不起作用，而且我把这两种文本放在一起，但是方法$( '#english' ).hide();不起作用。我已经困扰好久了，而#English id根本没有被锁定。知道为什么吗？

顺便说一下，“About”的内容是使用Ajax加载的。

</div>

Answer 1

$( '#english' ).hide();

is not working because #english is not present when the page loads. Your event should be written like this :

$('#about').on('click', '#enButton', function(){});

You can't attach an event to an element that is loaded in ajax, you attach it to the parent that is there at start then target the button.