В JQuery я добавил обработчик нажатия кнопки A Bootstrap v3.3. Внутри этой функции у меня есть JavaScript:
//
featureInfo.main_rgb = $("#f_mainRGB").val();
featureInfo.main_rgb = (featureInfo.main_rgb == "") ? null : featureInfo.main_rgb.substring(1);
//
featureInfo.stripe_rgb = $("#f_stripeRGB").val();
featureInfo.stripe_rgb = (featureInfo.stripe_rgb == "") ? null : featureInfo.stripe_rgb.substring(1);
//
featureInfo.border_rgb = $("#f_borderRGB").val(); // here is where it barfs
featureInfo.border_rgb = (featureInfo.borderRGB == "") ? null : featureInfo.border_rgb.substring(1);
То есть получить значения из 3 элементов управления цветом HTML 5 и поместить их в объект JSON для последующего вызова AJAX для обновления данных. Первые два, mainRGB и stripeRGB работают без проблем, но borderRGB cal to val () заставляет вкладку Chrome сразу же переходить в «Aw, Snap». Нет такой паузы, как если бы это была ошибка нехватки памяти, вызванная случайным бесконечным циклом.
Если я попытаюсь сделать это с базовым javascript, без JQuery, и использую document.getElementById ("f_borderRGB"), инструмент разработчика отобразит следующую ошибку:
metadata.jsp:259 Uncaught TypeError: Cannot convert undefined or null to object
at HTMLButtonElement.doEditSelectedFeature (metadata.jsp:259)
at HTMLButtonElement.dispatch (jquery.min.js:3)
at HTMLButtonElement.q.handle (jquery.min.js:3)
doEditSelectedFeature @ metadata.jsp:259
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3
Если я меняю порядок, когда получаю значения этих трех элементов управления, это всегда происходит с третьим, независимо от того, какой именно это элемент управления.
Кроме того, это происходит только тогда, когда я отлаживаю эту функцию с помощью инструментов разработчика и перехожу эту строку кода с помощью F10. Даже если эта строка будет следующей, которую нужно выполнить, и я нажму F8, чтобы продолжить работу без остановки вместо F10, ошибка не произойдет.
HTML5 для формы выводится JQuery, когда другой вызов AJAX возвращается с данными с сервера
var h = "<form class=\"form-horizontal\">" +
"<div class=\"form-group\">" +
"<div class=\"col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right\"><label for=\"f_mainRGB\">Main RGB: </label></div>" +
"<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\"><input class=\"form-control\" type=\"color\" id=\"f_mainRGB\" value=\"#"+filterEmptyString(featureInfo.main_rgb)+"\" disabled/></div>"+
"<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\" id=\"i_mainRGB\"></div>" +
"</div>"+
//
"<div class=\"form-group\">" +
"<div class=\"col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right\"><label for=\"f_stripeRGB\">Stripe RGB: </label></div>" +
"<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\"><input class=\"form-control\" type=\"color\" id=\"f_stripeRGB\" value=\"#"+filterEmptyString(featureInfo.stripe_rgb)+"\" disabled/></div>"+
"<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\" id=\"i_stripeRGB\"></div>" +
"</div>"+
//
"<div class=\"form-group\">" +
"<div class=\"col-xs-3 col-sm-3 col-md-3 col-lg-3 text-right\"><label for=\"f_borderRGB\">Border RGB: </label></div>" +
"<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\"><input class=\"form-control\" type=\"color\" id=\"f_borderRGB\" value=\"#"+filterEmptyString(featureInfo.border_rgb)+"\" disabled/></div>"+
"<div class=\"col-xs-1 col-sm-1 col-md-1 col-lg-1\" id=\"i_borderRGB\"></div>" +
"</div></form>";
$("#pfSelectedFeatureInfo").html(h);
Проблема не возникает в Firefox.
Есть идеи, что вызывает это?