jQuery .val() 仅在 Chrome 中“最终”返回 null答案

【问题标题】：jQuery .val() returns null "eventually" in Chrome onlyjQuery .val() 仅在 Chrome 中“最终”返回 null
【发布时间】：2012-07-13 17:29:48
【问题描述】：

2012 年 7 月 17 日更新：被清除的不仅仅是“current_width”和“current_height”字段——它是整个表单。从视觉上看，浏览器中的表单仍然包含值，但是 jQuery “阻塞”或其他东西 - 并且突然开始将表单中的所有字段读取为 null。

仅使用 .val() 不是问题，因为我已经通过在 preview() 函数中使用 .children() 和 .each() 验证了它：

var debugstring = '';
var debugform = $('#hidden_thumb_fields').children("input").each(function (){
    var child = $(this);
    debugstring += child.attr('id')+':'+child.val()+',';
});

console.log(debugstring);

和以前一样，它可以在您拖动选择区域时正常工作，但很快它就会开始返回 null。

请注意，这只发生在 Chrome 中。

原帖：（编辑：删除了 mlx 日志输出）

场景：

上传的图片宽度和高度写入 2 个表单域：current_width 和 current_height
在上传的图片上启用了 imgAreaSelect
imgAreaSelect 的 onInit 和 onSelectChange 调用函数“预览”
“预览”使用 .val() 读取表单字段的宽度和高度值
当您移动选择区域时，会重复调用“预览”
最终，.val() 开始返回 NULL，即使字段仍然明显包含正确的值并且没有被修改。这只发生在 Chrome 中。 Firefox 和 Safari 都运行愉快。 IE 尚未经过测试。
如果我使用纯 Javascript (document.getElementById().value)，则没有任何问题。

正如经常引用的那样，我在 $(document).ready 之后调用 imgAreaSelect。之前唯一要做的就是设置 3 个变量，我在下面的预览示例中包含了这些设置。

附带说明，如果有更好或更可接受的方法来获取图像宽度和高度数据，我会全力以赴。图片上传脚本 (PHP) 是首先设置这些字段的原因，以我的经验水平，我不确定是否有更好的方法来做到这一点。我想要图像的真实尺寸，而不是 .css 宽度和高度，因为它们可能（在我的场景中通常是）不同。

问题似乎源自的特定代码位就在预览功能的开头：

function preview(img, selection) { 
    var current_width = $('#thumbnail_form').find('#current_width').val();
    var current_height = $('#thumbnail_form').find('#current_height').val();

这里是预览（）。如果我删除 .find() 并直接使用 $('#current_width').val()，问题仍然存在：

var thumb_width=128;
var thumb_height=128;
var counter=1;

function preview(img, selection) { 
    var current_width = $('#thumbnail_form').find('#current_width').val();
    var current_height = $('#thumbnail_form').find('#current_height').val();

    //var current_width = document.getElementById("current_width").value;
    //var current_height = document.getElementById("current_height").value;

    var scaleX = thumb_width / selection.width; 
    var scaleY = thumb_height / selection.height; 

    var img_css_width = Math.round(scaleX * current_width) + 'px';
    var img_css_height = Math.round(scaleY * current_height) + 'px';
    var img_css_margin_left = '-' + Math.round(scaleX * selection.x1) + 'px';
    var img_css_margin_top = '-' + Math.round(scaleY * selection.y1) + 'px';

    // mlx and the css fields are just to help diagnose the problem
    var mlx = document.getElementById('mlx').value;
    if (!current_width) {
        current_width = 'NULL';
    }
    if (!current_height) {
        current_height = 'NULL';
    }
    $('#mlx').val(mlx+counter+")w:"+current_width+",h:"+current_height+"\n");
    $('#img_css_width').val(img_css_width);
    $('#img_css_height').val(img_css_height);
    $('#img_css_margin_left').val(img_css_margin_left);
    $('#img_css_margin_top').val(img_css_margin_top);

    $('#displayed_icon_container').find('#displayed_icon').css({
    //$('#displayed_icon').css({
        width:  img_css_width,
        height: img_css_height,
        marginLeft: img_css_margin_left,
        marginTop: img_css_margin_top 
    });
    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);

    // if I re-write these values back to the form, I can circumvent the issue, but why is this necessary?      
    //$('#current_width').val(current_width);
    //$('#current_height').val(current_height);
    $('#sx').val(scaleX);
    $('#sy').val(scaleY);
    counter++;
}

这是 HTML 的相关字段。我认为文件的其余部分不相关，但如果需要，我很乐意发布更多内容。

<div id='thumbnail_form'>
<form name='form' action='' method='post'>
<div id='hidden_thumb_fields'>
x1: <input type='text' name='x1' value='' id='x1' /><br />
y1: <input type='text' name='y1' value='' id='y1' /><br />
x2: <input type='text' name='x2' value='' id='x2' /><br />
y2: <input type='text' name='y2' value='' id='y2' /><br />
Selection Width (w): <input type='text' name='w' value='' id='w' /><br />
Selection Height (h): <input type='text' name='h' value='' id='h' /><br />

Old Icon Display URL: <input type='text' name='old_icon_display_URL' value='/whatever/thing.png' id='old_icon_display_URL' /><br />

Large File Width (current_width): <input type='text' name='current_width' value='' id='current_width' /><br />
Large File Height (current_height): <input type='text' name='current_height' value='' id='current_height' /><br />
Img Display Width: <input type='text' name='img_width' value='' id='img_width' /><br />
Img Display Height: <input type='text' name='img_height' value='' id='img_height' /><br />

Img CSS Width: <input type='text' name='img_css_width' value='' id='img_css_width' /><br />
Img CSS Height: <input type='text' name='img_css_height' value='' id='img_css_height' /><br />
Img CSS Margin Left: <input type='text' name='img_css_margin_left' value='' id='img_css_margin_left' /><br />
Img CSS Margin Top: <input type='text' name='img_css_margin_top' value='' id='img_css_margin_top' /><br />

scalex: <input type='text' name='sx' value='' id='sx' /><br />
scaley: <input type='text' name='sy' value='' id='sy' /><br />
Math Log X: <textarea name='mlx' value='' id='mlx' cols='40' rows='10'></textarea><br />

Icon Basedir: <input type='text' name='icon_basedir' value='' id='icon_basedir' /><br />
Icon BaseURL: <input type='text' name='icon_baseURL' value='' id='icon_baseURL' /><br />
Icon Relpath: <input type='text' name='icon_relpath' value='' id='icon_relpath' /><br />
Large Filename: <input type='text' name='large_image_filename' value='' id='large_image_filename' /><br />
Thumb Filename: <input type='text' name='thumb_image_filename' value='' id='thumb_image_filename' /><br />
</div>

<input type='button' name='cancel_thumb' value='Cancel' id='cancel_thumb' />
<input type='submit' name='save_thumb' value='Crop Image' id='save_thumb' />
</form>
</div>

【问题讨论】：

圣码转储蝙蝠侠！！！
@smd2008 你能只发布有问题的代码的相关部分吗？
预览功能开头就在这里：function preview(img, selection) { var current_width = $('#thumbnail_form').find('#current_width').val(); var current_height = $('#thumbnail_form').find('#current_height').val();
像这样的代码转储是一个坏主意，因为它使试图回答大量不相关信息的人负担过重，而无法对其进行全面测试。如果你把所有的东西都但弄清了这个问题的本质，那么问题很可能会暴露给你。事实上，我的直觉告诉我，当它们多次出现或在使用后没有正确移除时，你正在用 Id 识别对象。我的猜测是，根本问题不在于浏览器差异，这正是您注意到的地方
这一行：$('#thumbnail_form').find('#current_width') 没有意义。 id为current_width的元素只能有一个，直接用$("#current_width")选中即可。同样的问题在您的代码中多次发生。

标签： jquery google-chrome

【解决方案1】：

抛出 console.log(current_height,current_width);就在它们设置好之后。我的猜测是它们返回 null，因为您正在通过 Id 检查在 dom 中的多个位置找到的元素

【讨论】：

我查找了重复的 ID，但没有找到。感谢 console.log 的建议——我不知道。它显示 9 次更新后的值变为 NULL，但我不确定更新的数量是否重要。有时 #mlx 列表会在 40+ 之后变为 NULL，尽管它通常在 26 之后。

【解决方案2】：

好吧，也许我不明白你的问题，如果我错了，请纠正我：

现在您发布的代码是在其他代码允许“预览”选择器在屏幕上移动之后开始调用的。

当调用此代码时，它似乎开始在两个字段中看到 null，这些字段在调用此代码之前由其他 javascript 填充。

这是正确的吗？

如果是这样，那么问题可能出在填充这些字段的其他代码中。除了下面的注释之外，我没有看到此代码有任何明显的问题，仔细阅读您的代码显示的只是您为尝试调试问题而输入的代码。

也许这会导致溢出：

$('#mlx').val(mlx+counter+")w:"+current_width+",h:"+current_height+"\n");

更改此行会发生什么：

<textarea name='mlx' value='' id='mlx' cols='40' rows='10'></textarea><br />

到这里：

<textarea name='mlx' value='' id='mlx' cols='40' rows='200'></textarea><br />

因为 26 * 14 大约等于 40 * 10。

【讨论】：

不改变结果。 #mlx 是后来添加的，以帮助我诊断问题。我可以将它完全取出，并且在将 imgAreaSelect 选择器移动一点后，current_width 和 current_height 最终仍会设置为 0。
是的@Hogan，答案是肯定的。我在 $(document).ready 中用 jQuery 填充这两个字段。这有点复杂，但还有另一个插件称为一键上传或 ocupload，它首先处理图像的上传。它有一个“onComplete”选项/事件，它在 there 我使用 jQuery 设置这两个字段： $(#current_height).val('current_height_value_from_ajax_request');我现在在该事件期间抛出一个 console.log，并且可以确认它只命中该事件一次。
@smd2008 - 您没有在 onSelectChange 事件中更改这些值？
不。 onSelectChange 只是调用预览，而预览只是读取这些值。由于在初始图像上传后它们不会改变，也许我只需要看看将它移出预览，以便它们只被读取一次。这可能会解决它，但我很想弄清楚究竟是什么导致了这个问题。 :)

【解决方案3】：

这个问题是由Firebug Lite extension for Chrome 引起的。无论 Firebug Lite 面板是否打开，以及我是否将输出记录到控制台，都会出现问题。现在我知道在隐身模式下测试东西了。感谢大家的宝贵时间，并为误报道歉......

【讨论】：