引導按鈕在表中不起作用

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