在 javascript 事件点击后清空输入

Question

我也试图解决这个问题，但我认为有一个特殊的解决方案，我有一个添加按钮。当我点击这个按钮时，一个表单出现在一个带有保存按钮和输入的模式中。问题是我第一次点击这个按钮保存没问题，但是当我第二次点击时它执行了两次，当我点击第三次时它执行了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 = "";

Answer 1

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

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

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>

Answer 2

最后我通过替换这一行解决了这个问题：

$( "#btnSubmitModal" ).click(function() {

由此 :

$( "#btnSubmitModal" ).one('click',function() {

在 javascript 事件点击后清空输入

Empty the input after javascript event click

javascript

ajax

jquery

modal-dialog