Bootstrap button not working in table

Question

I have a simple bootstrap ToDo app that I am creating and I am having issues with some of the buttons. I have a button up top that adds a task, using jQuery and PHP. This button works as expected. Once the task is add, the table underneath updates and displays all of the tasks. On the right side of the tasks is a Delete button and this is the button that is giving me issues. Here is the code for that button:

HTML

<div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 col-xs-10 col-xs-offset-1">
               <table id="taskHolder" class="table table-striped">
                  <!-- THIS IS WHERE THE OUTPUT GOES -->
               </table>
            </div>
        </div>
    </div>

JS - Look at the bottom portion to see what is not working. The $('.btn.danger') part.

$(document).ready(function(){
    'use strict';
    $('#taskHolder').load('php/updateTasks.php');
    $('.failed').hide();
    $('.success').hide();
    $('#add').click(function(){
        var singleItem = $('#task').val();
        var dataString = 'task='+ singleItem;
        $('.failed').hide();
        $('.success').hide();

        $('.alert').hide();

        if(singleItem === ''){
            $('.failed').fadeIn(200).show();
            $('#task').focus();
            return false;
        } else {
            $.ajax({
                type: 'POST',
                url: 'php/addTask.php',
                data: dataString,
                success: function() {
                    $('.success').fadeIn(200).show();
                    $('#task').val('');
                    $('#taskHolder').load('php/updateTasks.php');
                }
            });
            return false;
        }
    });
    $('.btn-danger').click(function(){ //THIS IS WHERE I AM HAVING ISSUES

        var alert = alert('Hello there!');
        var console = console.log('Hello there!');

        return alert, console;

    });
});

PHP - This is what produces the table results. This is not a live production, so please ignore the MySQL lack of security ;)

<?php
    $con = mysqli_connect("localhost","root","root","todo");

    if (mysqli_connect_errno()) {
      echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }
    $searchTasks = "SELECT * FROM tasks WHERE state=1 ORDER BY date DESC";
    $results = mysqli_query($con,$searchTasks);
    $row = '';  
    while($row = mysqli_fetch_array($results)) {
        echo '<tr><td>'.$row['list'].'</td><td><button name="deleteTask" type="submit" class="deleteTask btn btn-danger pull-right" data-id="'.$row['key'].'">Delete</button></td></tr>';
    }
    mysqli_close($con);
?>

I tried using .btn-primary instead of the .btn-danger and it rendered the same results. I noticed that if I put the <form> tags around the whole table, the button refreshes the page when I press it, but there is still no console.log or alert . Plus, I am thinking that since I am using a jQuery click event, I should not have to have <form> tags around the table.

Any help that you can afford would be greatly appreciated.

Answer 1

You should use event delegation when content is added dynamically, like so

$(document).on('click', '.btn-danger', function(){//...});

Further reading

Answer 2

I tested your code with just one button: Fiddle and I was able to get it working once I used directly alert and console method calls, without any variables with them (var). Note I didn't have your PHP code, but I hope this helps.

$('.btn-danger').click(function () {
    alert('Hello there!');
    console.log('Hello there!');
    //var alert = alert('Hello there!');
    //var console = console.log('Hello there!'); 
    //return alert, console;
});