按钮单击功能不适用于 HTML 变量 | 如何解决这个问题？

Question

按钮单击功能不适用于HTML变量，是我错了还是我的代码缺少某些内容？我是初学者javasctipt，这是我第一次使用这种方法，不知道如何解决这个问题。那么请问，如何解决这个问题？任何帮助将不胜感激。

这是我的Jquery代码如下：

$(function(){

  var content1 = '<p>This is a paragraph</p><button class="btn">Show other content</button>';

  var content2 = '<h1>This is a title</h1>';

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

    $(".modal").show();

    $(".modal-content").html(content1);

  });

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

    $(".modal-content").html(content2);

    console.log(content2);

  });

});

.modal{

  width: 300px;

  height: 300px;

  margin: auto;

  display: none;

  background: #eee;

  padding: 20px 0;

  text-align: center;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="button">Open modal</button>

<div class="modal">

  <div class="modal-content"></div>

</div>

Answer 1

在第二次单击中，您需要从正文委托事件。由于附加事件时该元素不存在于 DOM 中。所以将其更改$(".btn").click(function(){ 为 $("body").on('click', '.btn', function() {$(function() {&nbsp; var content1 = '<p>This is a paragraph</p><button class="btn">Show other content</button>';&nbsp; var content2 = '<h1>This is a title</h1>';&nbsp; $(".button").click(function() {&nbsp; &nbsp; $(".modal").show();&nbsp; &nbsp; $(".modal-content").html(content1);&nbsp; });&nbsp; $("body").on('click', '.btn', function() {&nbsp; &nbsp; $(".modal-content").html(content2);&nbsp; &nbsp; console.log(content2);&nbsp; });});.modal {&nbsp; width: 300px;&nbsp; hieght: 300px;&nbsp; margin: auto;&nbsp; display: none;&nbsp; background: #eee;&nbsp; padding: 20px 0;&nbsp; text-align: center;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><button class="button">Open modal</button><div class="modal">&nbsp; <div class="modal-content"></div></div>