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 在事件触发后查找元素，并且也可以处理动态创建的元素。