Question

我有一个简单的引导程序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(){//...});

Bootstrap按钮不在表中工作

2 个答案: