Jquery .On('click') is being uncooperative

Question

I have a delete button that is generated inside of a div. When clicked I want it to delete the itself and the div and everything inside of it.

$('#geography-save').click(function () {
    $('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function(){
    $('.remove-save').on('click', function () {
        alert('test');
        $(this).parent('div').remove();
    });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>

<div class="selected-criteria"></div>

You need to bind to an unchanging parent element, not to the dynamic element itself (since it doesn't exist yet). You may also find this explanation useful: http://publicvoidlife.blogspot.com/2014/03/on-on-or-event-delegation-explained.html — David, Dec 23 '16 at 16:56

score 3 · Accepted Answer · edited Dec 27 '16 at 10:26

Just use jQuery's on() method like this:

$('body').on('click', '.remove-save', function () { ... });

You should bind the event to a parent which already exists if the content is generated dynamically inside the DOM structure!

$('#geography-save').click(function () {
    $('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function(){
    $('body').on('click', '.remove-save', function () {
        alert('test');
        $(this).parent('div').remove();
    });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>

<div class="selected-criteria"></div>

Thank you! Once the time-limit is up I'll mark your response as the answer! — Saliel Irizarry, Dec 23 '16 at 16:59
Thanks, Glad to know that it helped you to solve your problem! — Saumya Rastogi, Dec 23 '16 at 17:00

score 1 · Answer 2 · answered Dec 23 '16 at 16:58

As your button is dynamically generated, you can access it only based on a static element - so you can use this:

$('body').on('click','.remove-save', function () {

See demo below:

$('#geography-save').click(function() {
  $('.selected-criteria').prepend('<div><button type="button" class="btn btn-danger remove-save"><i class="fa fa-times"></i></button><p>Geography Selection</p></div>');
});
$(document).ready(function() {
  $('body').on('click', '.remove-save', function() {
    $(this).parent('div').remove();
  });
});

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<button type="button" class="btn btn-success" id="geography-save" data-dismiss="modal">Save Search</button>

<div class="selected-criteria"></div>

Jquery .On('click') is being uncooperative

2 Answers2