Question

在下面的html，javascript，bootstrap形式中，click事件处理程序正常工作并添加了一个新的动态行，但是当单击它时，remove按钮不会发出任何警告。调试器控制台上没有错误消息，所以我不确定是什么错误。

<!DOCTYPE html>
<html lang="en-us"> 
<head>
    <meta charset="utf-8">
    <title> Reggie Scenarios </title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <!-- #CSS Links -->
    <!-- Basic Styles -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

    <!-- Credits: http://bootsnipp.com/snippets/featured/responsive-navigation-menu 

    -->
    <link rel="stylesheet" type="text/css" href="leftMenu.css">

    <script src="scenario.js"></script>
</head>

<body>


      <div class="mainForm">
        <div class="container">
          <h2>Scenario</h2>
          <form id="bookForm" method="post" class="form-horizontal">
                <div class="form-group">
                    <label class="col-xs-1 control-label">Book</label>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" name="book[0].title" placeholder="Title" />
                    </div>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" name="book[0].isbn" placeholder="ISBN" />
                    </div>
                    <div class="col-xs-2">
                        <input type="text" class="form-control" name="book[0].price" placeholder="Price" />
                    </div>
                    <div class="col-xs-1">
                        <button id= "plusButton1" type="button" class="btn btn-default addButton"><span class="glyphicon glyphicon-plus"></span></button>
                    </div>
                </div>

                <div class="form-group hide" id="bookTemplate">
                    <div class="col-xs-4 col-xs-offset-1">
                        <input type="text" class="form-control" name="title" placeholder="Title" />
                    </div>
                    <div class="col-xs-4">
                        <input type="text" class="form-control" name="isbn" placeholder="ISBN" />
                    </div>
                    <div class="col-xs-2">
                        <input type="text" class="form-control" name="price" placeholder="Price" />
                    </div>
                    <div class="col-xs-1">
                        <button id = "removeButton" type="button" class="btn btn-default removeButton"><span class="glyphicon glyphicon-minus"></span></button>
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-xs-5 col-xs-offset-1">
                        <button type="submit" class="btn btn-default">Submit</button>
                    </div>
                </div>
            </form>

        </div>
      </div>

</body>

<script>
bookIndex = 0;
$(document).ready(function() {

    $(".removeButton").click(function() {
        alert("Remove button was clicked!");
        var id = $(this).attr("id");
        alert(id);
        var $row  = $(this).parents('.form-group'),
            index = $row.attr('data-book-index');
        // Remove element containing the fields
        $row.remove();

    });

    $(".addButton" ).click(function(event) {
        alert("Add button was clicked!");
        bookIndex++;
        var $template = $('#bookTemplate'),
            $clone    = $template
                            .clone()
                            .removeClass('hide')
                            .removeAttr('id')
                            .attr('data-book-index', bookIndex)
                            .insertBefore($template);

        $clone
            .find('[name="title"]').attr('name', 'book[' + bookIndex + '].title').end()
            .find('[name="isbn"]').attr('name', 'book[' + bookIndex + '].isbn').end()
            .find('[name="price"]').attr('name', 'book[' + bookIndex + '].price').end();


    });


});

请告知我可能做错了什么。我在这里创建了一个jsfiddle：https://jsfiddle.net/snehilw/7Luxo0L4/

在小提琴中，添加按钮有效，但删除按钮不起作用。我在调试器控制台中没有出现任何错误。

请指教，

谢谢！

Answer 1

使用event delegation。这会将事件绑定到具有#bookForm类的removeButton内的元素，甚至可以动态添加。

$('#bookForm').on('click', '.removeButton', function() {
    // Event handler
});

https://learn.jquery.com/events/event-delegation/

演示：https://jsfiddle.net/tusharj/7Luxo0L4/2/

Answer 2

使用委托。

Replcae使用此

删除按钮单击代码

 $(document).delegate('.removeButton','click',function(){
  //your code
});

Jsfiddle

Answer 3

你试过了 jQuery的（ '＃addRow'）的触发器（ “点击”）;

您首先必须拥有点击功能。我会做的是 - 因为提供了该功能（你可以修改链接以取出内联JavaScript，对吧？）：

jquery点击事件不会触发

3 个答案: