Javascript : Uncaught InvalidStateError: Failed to read the 'selectionDirection'

Question

我收到此错误消息:

Uncaught InvalidStateError: Failed to read the 'selectionDirection' property from 'HTMLInputElement': The input element's type ('hidden') does not support selection.

当我检查控制台时，它说这段代码有错误:

function simpan() {
    $.ajax({
        url: 'app/tblhasilsurvey/simpan',
        type: 'post',
        async: false,
        data: {
            cmd: window.cmd,
            id: window.id_hasilsurvey,
            id_daftar: window.id_daftar,
            id_jadwal: window.id_jadwal,
            //tblhasilsurvey_nobasurvey : $("#nomor_ba_survey").val(),
            nomor_izin : $("#nomor_izin").val(),
            tgl_izin : $("#tgl_izin").val(),
            pemilik_izin : $("#pemilik_izin").val(),
            lokasi : $("#lokasi").val(),
            kodekel : $("#kelurahan").val(),
            kodekec : $("#kecamatan").val(),
            tblhasilsurvey_tglbasurvey : $("#tgl_ba_survey").val(),
            tbldaftarrencanasurvey_koordinat : $("#lattitude_").val()+';'+$("#longitude_").val(), // (lattitude;longitude)
            tblhasilsurvey_fungsibangunan : $("#fungsi_bangunan").val(),
            tblhasilsurvey_uraianpermasalahan : $("#uraian_permasalahan").val(),
            tblizin_id : $("#tblizin_id").val()
        },
        success: function (data) {
            if(data=='success') {
                notifikasi('Sukses','Data Berhasil Disimpan', 'success');
                //window.location.reload();
            } else {
                notifikasi('Gagal','Data Gagal Disimpan', 'fail');
            }
        }
    });
    if( $("#lattitude_").val() !='' ) window.pos_lat = $("#lattitude_").val(); // jika koordinat terisi maka update posisi lattitude
    if( $("#longitude_").val() !='' ) window.pos_long = $("#longitude_").val(); // jika koordinat terisi maka update posisi longitude

    $("#peta-lokasi").slideDown(1000);
    initialize();
    $("html, body").animate({ scrollTop: $(document).height() }, 2500);
    return false;

    function refresh () {
        window.location.reload();
    }
}

谁能给我解释一下这里发生了什么？

Answer 1

在您的 HTML 中的某处，您有一个 <input type='hidden' />您正在尝试将其添加到数据对象中，但您可能正在添加 jQuery 对象，并且当 jQuery 对象在某处被字符串化时，可能会抛出此消息。鉴于您的大部分数据对象是通过显式调用 .val() 构建的我猜问题出在其中之一:

        cmd: window.cmd,
        id: window.id_hasilsurvey,
        id_daftar: window.id_daftar,
        id_jadwal: window.id_jadwal,

尝试将它们注释掉，看看您的错误是否消失了。如果是这样，那么可以通过添加 .val() 来解决问题。到有问题的行的末尾。

---

编辑和扩展

(2015 年 4 月 9 日)自从我写完这个答案以来，它已经有 3 个赞成票，全部及时散布，所以我猜其他人遇到了这个错误并找到了这个答案，所以这里有一个更一般的解释来帮助人们出。

如果您将表示隐藏输入的 jQuery 对象添加到 JS 对象，然后尝试将该 JS 对象序列化为 JSON，则会抛出此错误。

以最简单的形式重现错误的演示:

http://jsfiddle.net/ptugva6t/2/

使用这个 HTML:

<input type="hidden" id="test1" value="test1_val" />

然后 #test1如果我们使用这个 JS 将触发错误:

$(document).ready(function() {
    var data = {
        test1: $("#test1")
    }
    JSON.stringify(data)
});

虽然这样没问题:

$(document).ready(function() {
    var data = {
        test1: $("#test1").val()
    }
    JSON.stringify(data)
});

而如果您使用文本输入，则不会遇到此错误，但由于您尝试序列化的对象的复杂性，您可能会遇到其他序列化错误!

---

更新

(2016 年 9 月 7 日)这似乎只是一个 Chrome 错误，并且已在最近的 Chrome 更新中修复。现在在 Chrome 52 中完全没有错误，您可以毫无问题地对 jquery 对象进行 JSON.stringify。

Firefox 也可以。不过，Safari 9.1.1 仍然会抛出错误 - JSON.stringify 上的 TypeError 可以通过添加 .val()

来修复

因此出现了一个小型项目，用于查找 Chrome 错误报告及其修复，并将其报告给 Safari。