如何在动态附加元素上附加click事件？

Question

我已经使用HTML和CSS发出了一些警报，我想通过jQuery添加和删除这些警报，但问题是，当按下关闭按钮时，我无法关闭动态添加的警报。

我也搜索了谷歌和堆栈溢出，但我还没有理解他们是如何做到的，如果你能给我一些解释，我会很感激。

＆＃13;

＆＃13;

$(document).ready(function() {

    // remove alert
    $(".close").on("click", function() {
        $(this)
            .parent(".alert")
            .slideUp(250)
            .promise()
            .done(function() {
                $(this).remove();
            });
    });

    // append alert
    const btn = $("#btn");
    btn.on("click", function() {
        $($(".alert")[$(".alert").length - 1])
            .after(
                '<div class="alert -ugly"> <header> Dynamically added</header> <div class="close"><img src="https://res.cloudinary.com/ajayrawat/image/upload/v1514205869/close_df3rub.svg" /> </div></div>'
            )
            .hide()
            .slideDown(250);
    });
});

＆＃13;

body {
  background-color: #ddd;
  font-family: sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
}

.alert {
  display: block;
  position: relative;
  width: 100%;
  max-width: 30rem;
  padding: .5rem .8rem;
  margin: 1rem auto 0;
  border-radius: .2rem;
  color: #fff;
}
.alert .close {
  float: right;
  width: 10px;
  height: 10px;
  cursor: pointer;
}
.alert .close:hover svg, .alert .close:focus svg {
  fill: #fff;
}
.alert .close svg {
  fill: rgba(255, 255, 255, 0.5);
}
.alert.-ugly {
  background-color: #4C4A48;
}
.alert.-danger {
  background-color: #E81123;
}
.alert.-success {
  background-color: #00CC6A;
}
.alert.-info {
  background-color: #0078D7;
}
.alert header {
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="btn">Add Alert</button>
<div class="alert -danger">
    <header>Danger</header>
    <div class="close">
        <img src="https://res.cloudinary.com/ajayrawat/image/upload/v1514205869/close_df3rub.svg" /> 
    </div>
</div>
<div class="alert -success">
    <header>Success</header>
    <div class="close">
        <img src="https://res.cloudinary.com/ajayrawat/image/upload/v1514205869/close_df3rub.svg" /> 
    </div>
</div>
<div class="alert -info">
    <header>Information</header>
    <div class="close">
        <img src="https://res.cloudinary.com/ajayrawat/image/upload/v1514205869/close_df3rub.svg" /> 
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如此接近，只需更改此行：

$(".close").on("click", function() {

要

$(document).on("click", ".close", function() {

$(document).ready(function() {

  // remove alert
  $(document).on("click", ".close", function() {
    $(this)
      .parent(".alert")
      .slideUp(250)
      .promise()
      .done(function() {
        $(this).remove();
      });
  });

  // append alert
  const btn = $("#btn");
  btn.on("click", function() {
    $($(".alert")[$(".alert").length - 1])
      .after(
        '<div class="alert -ugly"> <header> Dynamically added</header> <div class="close"><img src="https://res.cloudinary.com/ajayrawat/image/upload/v1514205869/close_df3rub.svg" /> </div></div>'
      )
      .hide()
      .slideDown(250);
  });
});

body {
  background-color: #ddd;
  font-family: sans-serif;
  font-size: 14px;
  letter-spacing: 1px;
}

.alert {
  display: block;
  position: relative;
  width: 100%;
  max-width: 30rem;
  padding: .5rem .8rem;
  margin: 1rem auto 0;
  border-radius: .2rem;
  color: #fff;
}

.alert .close {
  float: right;
  width: 10px;
  height: 10px;
  cursor: pointer;
}

.alert .close:hover svg,
.alert .close:focus svg {
  fill: #fff;
}

.alert .close svg {
  fill: rgba(255, 255, 255, 0.5);
}

.alert.-ugly {
  background-color: #4C4A48;
}

.alert.-danger {
  background-color: #E81123;
}

.alert.-success {
  background-color: #00CC6A;
}

.alert.-info {
  background-color: #0078D7;
}

.alert header {
  display: inline-block;
  vertical-align: middle;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="btn">Add Alert</button>
<div class="alert -danger">
  <header>Danger</header>
  <div class="close">
    <img src="https://res.cloudinary.com/ajayrawat/image/upload/v1514205869/close_df3rub.svg" />
  </div>
</div>
<div class="alert -success">
  <header>Success</header>
  <div class="close">
    <img src="https://res.cloudinary.com/ajayrawat/image/upload/v1514205869/close_df3rub.svg" />
  </div>
</div>
<div class="alert -info">
  <header>Information</header>
  <div class="close">
    <img src="https://res.cloudinary.com/ajayrawat/image/upload/v1514205869/close_df3rub.svg" />
  </div>
</div>

P.S：请注意，您的代码存在问题，如果删除所有提醒，则无法再添加新提醒。