引导按钮在表中不起作用

Question

我正在创建一个简单的Bootstrap ToDo应用程序，但是某些按钮存在问题。 我在顶部有一个使用jQuery和PHP添加任务的按钮。 此按钮可以正常工作。 添加任务后，下面的表将更新并显示所有任务。 任务的右侧是一个“删除”按钮，这是给我一些问题的按钮。 这是该按钮的代码：

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-查看底部，看看有什么不起作用。 $('.btn.danger')部分。

$(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-这就是产生表结果的原因。 这不是现场直播，因此请忽略MySQL缺乏安全性;）

<?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);
?>

我尝试使用.btn-primary而不是.btn-danger ，并且得到相同的结果。 我注意到，如果将<form>标记放在整个表周围，则当我按下按钮时会刷新页面，但是仍然没有console.log或alert 。 另外，我在想，由于我使用的是jQuery click事件，因此我不必在表周围有<form>标记。

您所能提供的任何帮助将不胜感激。

Answer 1

动态添加内容时，应使用事件委托，例如

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

进一步阅读

Answer 2

我只用一个按钮就测试了您的代码： Fiddle ，一旦我直接使用警报和控制台方法调用，而没有任何变量（var），我就能够使它工作。 注意：我没有您的PHP代码，但希望对您有所帮助。

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