Question

我正在建立一个需要动态删除表格的网站。我使用Bootstrap作为CSS和JQuery 1.11.2作为大脑。我也在使用Parse.com，但所有其他页面上的工作正常。问题不在于加载我的任何JQuery代码，而是在不知道ID的情况下在删除给定行时激活此特定角色。

我隐藏了名为“创建碗”的“页面”，但可以通过单击右侧导航栏进行访问。

我应该可以点击此删除按钮，相应地删除该行。 enter image description here

我正在使用的HTML是：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Off Canvas Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/custom/dashboardMain.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <!-- navigation bar at the top -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="" id="dashboard_home_title_link">DePauw Prindle Ethics Bowls</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Dashboard</a></li>
            <li><a href="#">Settings</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Help</a></li>
            <li><a href="" id="dashboard_log_out">Log Out</a></li>
          </ul>
          <!--<form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form> -->
        </div>
      </div>
    </nav>
    <div class="container">

      <div class="row row-offcanvas row-offcanvas-right">

        <div class="col-xs-12 col-sm-9">
          <p class="pull-right visible-xs">
            <button type="button" class="btn btn-primary btn-xs" data-toggle="offcanvas">Toggle nav</button>
          </p>

          <!-- Giant intro -->
          <div class="jumbotron">
            <h1 id="dashboard_title_intro"></h1>
            <p>Take a look around. Here you can coordinate ethics bowl with the simplicity and power of our web application.</p>
          </div>

          <!-- HOME CONTENT -->
          <div class="row" id="dashboard_content_home">
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
            <div class="col-xs-6 col-lg-4">
              <h2>Heading</h2>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
              <p><a class="btn btn-default" href="#" role="button">View details &raquo;</a></p>
            </div><!--/.col-xs-6.col-lg-4-->
          </div><!--/row-->

          <!-- Ethic bowl CONTENT -->
          <div class="row" id="dashboard_ethic_bowls">
            <div class="row placeholders">
                <div class="col-md-12 text-center"> 
                    <h1>Ethic Bowls</h1>
                    <button type="button" class="btn btn-lg btn-info" id="dashboard_add_ethic_bowl"> + </button>
                </div>
            </div>

            <!-- the list of ethic bowls for a given user -->

            <div class="table-responsive foo">
                <table class="table table-striped" id="dashboard_ethic_bowl_list">
                    <thead>
                        <tr>
                        <th>Title</th>
                        <th>Location</th>
                        <th>Date</th>
                        <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="dashboard_ethic_bowl_rows">
                        <tr>
                        <td>tempTitle</td>
                        <td>tempLocation</td>
                        <td>tempDate</td>
                        <td>
                            <div class="btn-group">
                                <button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown" style="text-center;">
                                    <span>Actions</span> <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu stay-open pull-right" role="menu" style="padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; text-align:center;">
                                    <li><button class="btn btn-primary">View</button></li>
                                    <br>
                                    <li><button class="btn btn-warning">Edit</button></li>
                                    <br>
                                    <li><button class="btn btn-danger" id="deleteBowl">Delete</button></li>
                                </ul>
                            </div>
                        </td>       
                    </tr>
                    </tbody>
                </table>    
            </div><!--/dashboard_ethic_bowl_list-->

          </div><!--/dashboard_ethic_bowls-->

        </div><!--/.col-xs-12.col-sm-9-->

        <!-- left side navigation bar for content area -->
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
          <div class="list-group">
            <a href="#" class="list-group-item" id="dashboard_nav_home">Home</a>
            <a href="#" class="list-group-item" id="dashboard_nav_ethic_bowls">Create Bowls</a>
          </div>
        </div><!--/.sidebar-offcanvas-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; DePauw University 2015</p>
      </footer>

    </div><!--/.container-->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
    <script src="js/parse/dashboardMainjs.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

问题是当我尝试点击操作 - ＆gt;删除行，它什么都不做。我试图使用$(this).closest('tr').remove();但问题的一部分是，尽管引用了正确的通用ID，它似乎永远不会被调用。我引用它错了什么？我使用onclick函数“#dashboard_add_ethic_bowl”动态添加行。

 $(function() 
{

    $('[data-toggle="offcanvas"]').click(function () {
        $('.row-offcanvas').toggleClass('active')
    });

    $("#dashboard_nav_home").click(function(event)
    {
        // http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/
        event.preventDefault();
        showHome();
        hideAddCoachSchool();

    });

    $("#dashboard_nav_ethic_bowls").click(function(event)
    {
        event.preventDefault();
        $("#dashboard_content_home").hide();
        $("#dashboard_ethic_bowls").show();
    });


    // TODO: these arent working yet

    // http://stackoverflow.com/questions/23249130/delete-table-row-using-jquery
    $(".btn btn-danger").click(function(){ 
        alert('awwwwww');
    });


    $('#deleteBowl').click(function (event) {
        event.preventDefault();
        alert("aa");
        $(this).closest('tr').remove();
        return false;
    });

    $("#dashboard_add_ethic_bowl").click(function(event)
    {
        event.preventDefault();
        var rowContent = '<tr>' +
            '<td>' + 'tempTitle' + '</td>' +
            '<td>' + 'tempLocation' + '</td>' +
            '<td>' + 'tempDate' + '</td>' +
            '<td>' +
                '<div class="btn-group">' +
                        '<button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown" style="text-center;">' +
                            '<span>Actions</span> <span class="caret"></span>' +
                        '</button>' +
                        '<ul class="dropdown-menu stay-open pull-right" role="menu" style="padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; text-align:center;">' +
                        '<li><button class="btn btn-primary">View</button></li>' +
                        '<br>' +
                        '<li><button class="btn btn-warning">Edit</button></li>' +
                        '<br>' +
                        '<li><button class="btn btn-danger" id="deleteBowl">Delete</button></li>' +
                        '</ul>' +
                '</div>' +
            '</td>' +       
        '</tr>';
        $("#dashboard_ethic_bowl_list").show();
        $('#dashboard_ethic_bowl_rows').append(rowContent);
    });

    // declare simple log out
    $("#dashboard_log_out").click(function(event) 
    {
        event.preventDefault();
    });

}

function hideHome()
{
    $("#dashboard_content_home").hide();
}

function showHome()
{
    $("#dashboard_content_home").show();
}

function hideAddCoachSchool()
{
    $("#dashboard_ethic_bowls").hide();
}

function showAddCoachSchool()
{
    $("#dashboard_ethic_bowls").show();
}

编辑：我现在尝试使用HTML中的硬编码行，它与onclick和remove一起使用，但如果我通过单击“+”按钮动态添加它们则不行。有没有正确的方法来引用要删除的动态添加的行？

Answer 1

对动态创建的元素使用事件委托：

    $('#dashboard_ethic_bowl_list').on('click','.btn', function(event){
        event.preventDefault();
        alert("aa");
        $(this).closest('tr').remove();
        return false;
    });

也使用UNIQUE ID。

每次动态添加新行时，都会重复id="deleteBowl"。 ID必须是独一无二的。最好把它变成一个类并使用它。

...<li><button class="btn btn-danger deleteBowl">...
                                     ^^^^^^^^^

    $('#dashboard_ethic_bowl_list').on('click','.deleteBowl', function(event){
        event.preventDefault();
        alert("aa");
        $(this).closest('tr').remove();
        return false;
    });

Answer 2

“我刚刚尝试使用HTML中的硬编码行使用onclick和删除但不是如果我动态添加它们点击大“+”按钮。有没有正确的方法来引用a 动态添加要删除的行？“

事件似乎没有添加到这些新元素中。创建它们时，您可以添加允许选择/删除的事件。

JQuery动态删除表行

2 个答案: