javascript - Bootstrap 按钮在表格中不起作用

Question

我正在创建一个简单的 Bootstrap 待办事项应用程序，但我遇到了一些按钮问题。我在顶部有一个按钮，使用 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 点击事件，我不应该有 <form> table 周围的标签。

如果您能提供任何帮助，我们将不胜感激。

Answer 1

动态添加内容时，您应该使用事件委托(delegate)，如下所示

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

Further reading