Question

我正在使用jquery＆amp; ajax动态生成表单元素。因此，我的代码生成元素，一切正常。

现在我在每个文本框上都有一个onchange事件，当值改变时会触发焦点。

另外，我有一个保存按钮，其中有一个onmousedown事件来发布表单数据。

我正在使用的代码：（HTML代码）

<div id="form">
    <input type="text" class="vchange" />
    <input type="text" class="vchange" />

    <a href="#" class="btn btn-success vsubmit" onmousedown="return false;">Submit</a>
</div>
<script>
    $(document).ready(function () {
        $('#form').on('change', '.vchange input[type=text]', function () {
            //ajax post back code to save textbox data in database.
        });
        $('#form').on('mousedown', '.vsubmit', function () {
            $("#form").change(); //updated code as per suggestion
            let choice = confirm("Are you sure u want to submit the form?");
            if (choice) ? alert('Thank you.') : alert('cancelled.');
        });
    });
</script>

现在，问题是在mousedown事件之前调用onchange事件，因此数据不会保存在表中。如果有人帮我解决上述问题，将会有很大的帮助。

Answer 1

您必须为事件函数传递一个变量。我在这里称它为“事件”。变量“事件”表示已触发事件的元素。在这种情况下，偶数为“ onmousemove”。因此，您可以通过使用“ event.target.value”来访问其内容（例如值）。无论何时将鼠标移到该元素上方，无论是否单击鼠标按钮，实际上都会发生此事件。但是由于其值不变，所以当您不按鼠标按钮或移动滑块时，就不会看到任何变化。但是它触发了。当您让它显示滑块的值或执行其他操作时，您会首先看到这些更改，这些更改随该函数的每次触发而更改。

这是您要搜索的解决方案：

$('#myrange').on('mousemove', function(event){
    $('#labelToShow').html(event.target.value);
    $('#inputWithTypeNumber').val(event.target.value);
})

这是一个代码示例，供您了解其工作原理

var somecounter = 0;
$('#myrange').on('mousemove', function(event){
    $('#labelToShow').html(somecounter++);
});

只需创建一个类型为“范围”的输入元素，并为其指定ID为“ myrange”。然后，还创建一个ID为“ labelToShow”的标签和另一个ID为“ inputWithTypeNumber”的类型为“ number”的输入元素。这样。

<input type="range" id="myrange" />
<input type="number" id="inputWithTypeNumber" />
<label id="labelToShow">Move your mouse above the slider</label>

Answer 2

到目前为止，我了解到您的问题是在提交表单之前保存textinput中ajax次调用的值，mousedown事件在onchange之前触发为什么不手动触发onchange事件中的mousedown以解决下面的解决方法

$("#form").onchange();或$("#form").fireEvent("onchange");

编辑

我只是想添加示例代码，以便如果OP有问题理解我正在讨论的想法作为评论刚刚发布，问题仍然没有解决，我所说的是你可以跟踪更改为文本输入随时更改并解决mousedown事件始终在onchange手动触发onchange内mousedown之后触发的问题，如{ {1}}您的代码中$('input[class="vchange"]').trigger('change');事件onchange的选择器错误，不会选择使用'.vchange input[type=text]'或.vchange的任何元素。请参阅下面的演示，其中在发送ajax调用后将始终提交表单。

但是请记住，这会触发同时使用类'input[class="vchange"]' 的每个输入的ajax调用，它具有一些值，意味着它不是空的。因此，更好的方法是创建一个单独的函数，收集具有.vchange的类.vchange的所有字段，如果您有多个字段，则发送一个调用以保存所有字段。

value!==''

$(document).ready(function() {
  $(document).on('change', 'input[class="vchange"]', function() {
    if ($(this).val() !== '') {
      console.log('ajax post back code to save textbox data in database.');
    }
  });
  $(document).on('mousedown', '.vsubmit', function() {
    $('input[class="vchange"]').trigger('change');
    console.log('submitting form');

  });
});

Answer 3

为什么不在要求用户确认的同一处理程序中处理输入？如果您使用表单元素，则可以使用submit事件并考虑提交按钮以支持仅键盘输入。

$(function(){

  $('#form').on('submit', function (e) {
    e.preventDefault();

    let choice=confirm("Are you sure u want to submit the form?");
    
    if (!choice) {
      console.info("cancel");
    } else {
      console.info("ajax post back code to save textbox data in database.");
    }
  });
    
  $('.vsubmit').on('click', function () {
    $("#form").submit();
  });
  
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="form">
  <input type="text" class="vchange"/>
  <input type="text" class="vchange"/>
  <a href="#" class="btn btn-success vsubmit" onmousedown="return false;">Submit</a>
</form>

onmousedown事件后onchange事件会触发吗？

3 个答案: