Javascript按钮无法与Bootstrap 4一起正常使用
[英]Javascript button not working properly with bootstrap 4
问题描述
我正在使用关闭按钮破坏模式的模态窗体上创建动态div，到目前为止效果很好。 然后，我添加了一个按钮来添加新的div / forms项，但是这次不调用close按钮回调，而是关闭模式而不是破坏div本身。 从addNewRow创建行时不调用回调函数。 这是代码：
console.log("hello"); var myModal = $('#exampleModal'); var myForm = $('#exampleModal #myForm'); var value = $('#redactorArea3').val(); var result = jQuery.parseJSON(value); var recordsCounter = 0; for (var index in result){ var obj = result[index]; var mydiv = '<div id="pepe'+index+'" class="input-group mb-3">'; for (var property in obj){ var attrName = property; var attrValue = obj[property]; //myForm.append('<div class="form-group"><label>'+attrName+'</label><textarea class="form-control" id="exampleFormControlTextarea1" rows="1">'+ attrValue +'</textarea></div>'); mydiv += '<div class="input-group-prepend"><span class="input-group-text">'+attrName+'</span></div><input type="text" class="form-control" id="field'+index+'" value="'+attrValue+'">'; } mydiv += '<button id="remove' + index + '" class="btn btn-danger remove-me" >-</button></div>'; myForm.append( mydiv); recordsCounter++; } function addNewRow(){ recordsCounter++; var mydiv = '<div id="pepe'+recordsCounter+'" class="input-group mb-3">'; mydiv += '<div class="input-group-prepend"><span class="input-group-text"></span></div><input type="text" class="form-control" id="field'+recordsCounter+'">'; mydiv += '<div class="input-group-prepend"><span class="input-group-text"></span></div><input type="text" class="form-control" id="field'+recordsCounter+'">'; mydiv += '<button id="remove' + recordsCounter + '" class="btn btn-danger remove-me" >-</button></div>'; myForm.append( mydiv); console.log("add row"); } $('.remove-me').click(function(e){ console.log("remove me"); e.preventDefault(); var fieldNum = this.id.charAt(this.id.length-1); var fieldID = "#field" + fieldNum; var pepeId = "#pepe" + fieldNum; $(this).remove(); $(fieldID).remove(); $(pepeId).remove(); recordsCounter--; });
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Mara test</title> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Show modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Database management</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="data_list"> <ul> </ul> <form id="myForm"> <div id="formItems"> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-success" onclick="addNewRow();">+</button> </div> </div> </div> </div> <!-- Modal --> <div class="d-none"> <textarea id="redactorArea3" class="text-justify">[{"name": "S","price": "20.00"},{"name":"M","price": "20.00"},{"name":"L","price": "20.00"},{"name":"XL","price": "20.00"},{"name":"2XL","price": "21.00"},{"name":"3XL","price": "22.00"}]</textarea> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="mara.js"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2018-12-19 17:19:36
所以我上面的选择器不太正确，但这是一个有效的版本。 另外，顺便说一句，您的addNewRow()方法不会添加名称和价格标签。
console.log("hello"); var myModal = $('#exampleModal'); var myForm = $('#exampleModal #myForm'); var value = $('#redactorArea3').val(); var result = jQuery.parseJSON(value); var recordsCounter = 0; for (var index in result){ var obj = result[index]; var mydiv = '<div id="pepe'+index+'" class="input-group mb-3">'; for (var property in obj){ var attrName = property; var attrValue = obj[property]; //myForm.append('<div class="form-group"><label>'+attrName+'</label><textarea class="form-control" id="exampleFormControlTextarea1" rows="1">'+ attrValue +'</textarea></div>'); mydiv += '<div class="input-group-prepend"><span class="input-group-text">'+attrName+'</span></div><input type="text" class="form-control" id="field'+index+'" value="'+attrValue+'">'; } mydiv += '<button id="remove' + index + '" class="btn btn-danger remove-me" >-</button></div>'; myForm.append( mydiv); recordsCounter++; } function addNewRow(){ recordsCounter++; var mydiv = '<div id="pepe'+recordsCounter+'" class="input-group mb-3">'; mydiv += '<div class="input-group-prepend"><span class="input-group-text"></span></div><input type="text" class="form-control" id="field'+recordsCounter+'">'; mydiv += '<div class="input-group-prepend"><span class="input-group-text"></span></div><input type="text" class="form-control" id="field'+recordsCounter+'">'; mydiv += '<button id="remove' + recordsCounter + '" class="btn btn-danger remove-me" >-</button></div>'; myForm.append( mydiv); console.log("add row"); } $('#myForm').on('click', '.remove-me', function(e){ debugger; console.log("remove me"); e.preventDefault(); var fieldNum = this.id.charAt(this.id.length-1); var fieldID = "#field" + fieldNum; var pepeId = "#pepe" + fieldNum; $(this).remove(); $(fieldID).remove(); $(pepeId).remove(); recordsCounter--; });
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <title>Mara test</title> </head> <body> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Show modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">Database management</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="data_list"> <ul> </ul> <form id="myForm"> <div id="formItems"> </div> </form> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> <button type="button" class="btn btn-success" onclick="addNewRow();">+</button> </div> </div> </div> </div> <!-- Modal --> <div class="d-none"> <textarea id="redactorArea3" class="text-justify">[{"name": "S","price": "20.00"},{"name":"M","price": "20.00"},{"name":"L","price": "20.00"},{"name":"XL","price": "20.00"},{"name":"2XL","price": "21.00"},{"name":"3XL","price": "22.00"}]</textarea> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <script src="mara.js"></script> </body> </html>
Bootstrap Popover类无法在javascript生成的内容上正常工作
[英]Bootstrap popover class not working properly on javascript generated content
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.