gpt4 book ai didi

javascript - javascript 事件点击后清空输入

转载 作者:行者123 更新时间:2023-12-03 10:33:46 27 4
gpt4 key购买 nike

我也试图解决这个问题,但我认为有一个特殊的解决方案,我有一个添加按钮。当我单击此按钮时,模态中会出现一个表单,其中包含保存按钮和输入。问题是,当我第一次点击这个按钮保存时,还可以,但是当我第二次点击时,它执行两次,当我点击第三次时,它执行3次......

我的脚本

$table.on('click', 'button#add', function() {
var id = $(this).closest('tr').attr('id');

jQuery('#add_div').modal('show', {backdrop: 'static'});
var var1 = document.getElementById("ex_:"+id).innerHTML;
$(".modal-body #var1").val( var1 );

$( "#btnSubmitModal" ).click(function() {
var var1 = document.getElementById("ex_:"+id).innerHTML;
var var2 = document.getElementById("fin:"+id).innerHTML;
var var3 = $( "#var2" ).val();
var var4 = parseInt(var3) + 1;
var var5 = var2;

$.ajax({
type: "POST",
url: "ajax.php",
data: "id=" + id + "&var3=" + var3 + "&var4=" + var4 + "&var5=" + var5,
success: function(response){
var row = document.getElementById(id);
$(insertRow(response,var4,var5)).insertAfter($(row).closest('tr'));
document.getElementById("fin:"+id).innerHTML = var3;
document.getElementById("debut:"+response).innerHTML = var4;
document.getElementById("fin:"+response).innerHTML = var5;
}
});
});
});

我添加这个来清空输入,但它不起作用

 document.getElementById("var2").value = "";

最佳答案

我遇到了同样的问题,我在下面解决了它..

我将模态实例存储到变量中并在其上添加监听器。现在我调用同一个模态实例并仅更改我想要的内容。

var modal = $('#myModal');

// listeners
$('.list-group li').click(function() {
modal.modal('show');
modal.find('#myModalLabel').text(self.data('office'));
modal.find('#office').val(self.data('office'));
modal.find('select[name=rights] :nth-child(1)').prop('selected', true);
});

modal.on('click', '.btn-primary', function () {
console.log('modal ok and hidden');
modal.modal('hide');
});

并且工作正常

我给你完整的源码

<html>
<head>
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap-theme.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<style>
.box { width: 100px; height: 100px; background-color: gray; }
.added { color: red; }
</style>

<div id="offices" style="width: 30%;">
<ul class="list-group">
<li class="list-group-item" data-office="office1">office 1 <span class="pull-right"></span></li>
<li class="list-group-item" data-office="office2">office 2 <span class="pull-right"></span></li>
<li class="list-group-item" data-office="office3">office 3 <span class="pull-right"></span></li>
<li class="list-group-item" data-office="office4">office 4 <span class="pull-right"></span></li>
</ul>
</div>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">label</h4>
</div>
<div class="modal-body">
role <select name="rights"><option value="admin">admin</option><option value="user">user</option></select>
</div>
<div class="modal-footer">
<input type="hidden" id="office" value="">
<button type="button" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Ok</button>
</div>
</div>
</div>
</div>


<script>
$(document).ready(function() {

var modal = $('#myModal');

// listeners
$('.list-group li').click(function() {
modal.modal('show');
modal.find('#myModalLabel').text(self.data('office'));
modal.find('#office').val(self.data('office'));
modal.find('select[name=rights] :nth-child(1)').prop('selected', true);
});

modal.on('click', '.btn-primary', function () {
console.log('modal ok and hidden');
modal.modal('hide');
});


});
</script>

</body>
</html>

关于javascript - javascript 事件点击后清空输入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29097090/

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