gpt4 book ai didi

javascript - jquery点击事件不会触发

转载 作者:行者123 更新时间:2023-11-28 13:24:06 26 4
gpt4 key购买 nike

在下面的 html、javascript、bootstrap 表单中,单击事件处理程序正常工作并添加一个新的动态行,但删除按钮在单击时不会发出任何警报。调试器控制台上没有错误消息,因此我不确定出了什么问题。

<!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/

在 fiddle 中,添加按钮有效,但删除按钮不起作用。我在调试器控制台中没有收到任何错误。

请指教,

谢谢!

最佳答案

使用事件委托(delegate)。这会将事件绑定(bind)到具有 removeButton 类的 #bookForm 内的元素,甚至动态添加。

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

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

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

关于javascript - jquery点击事件不会触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30588012/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com