Javascript 打印功能打破下拉表单提交更改

Question

我在同一页面上运行两个函数，一个自动提交一个下拉表单来更新变量，另一个用于打印页面的一部分。它们都按预期工作，除非我使用打印功能后，它会破坏表单提交功能的工作，除非我重新加载页面。不确定为什么或如何解决这个问题。    <script>        $(function() {            $('#daterange').change(function() {                this.form.submit();            });        });    </script>    <script>        function printDiv(printArea) {            var printContents = document.getElementById(printArea).innerHTML;            var originalContents = document.body.innerHTML;            document.body.innerHTML = printContents;            window.print();            document.body.innerHTML = originalContents;        }    </script>

Answer 1

问题是当您在 printDiv 函数中重写文档时，jQuery 会丢失此处绑定的 onchange 事件的上下文：

$(function() {

    $('#daterange').change(function() {

        this.form.submit();

    });

});

解决此问题的一种可能的解决方法是使用如下方式将 onChange 事件绑定到动态创建的元素上：

$(document).change('#daterange', function(e) {

    e.preventDefault();

    //this.form.submit(); // 'this' is now referring to document thus this.form is undefined.

    this.forms[0].submit(); // refer to your form here. this is just an example for reference

    //alert('submit called');

});

注意这一部分，这里我们告诉 jquery 将事件与文档绑定，然后在值更新时$(document).change('#daterange', function(e) {查找该元素。#daterange.change 中的第一个参数告诉 jQuery 在事件触发后查找元素，并且也可以处理动态创建的元素。