CODEWITHSUNDEEP
jqueryhtml
Ajay Rawat
Ajay Rawat

Reputation: 307

How to attach click event on dynamically appended elements?

I have made some alerts using HTML and CSS, I want to add and remove these alerts through jQuery but the problem is I'm unable to close dynamically added alerts when close button is pressed.

I have searched google and stack-overflow also but I haven't understood how they were doing that, I'll appreciate if you can gave me some explanation with answer.

$(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);
    });
});
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>

Upvotes: 3

Views: 2204

Answers (1)

Pedram
Pedram

Reputation: 16615

So close, just change this line:

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

To:

$(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: Note that, your code have an issue, if you remove all alerts, you can't add new alert anymore.

Upvotes: 9

Related Questions