Chrome bug还是jQuery bug？

为什么以下代码在IE 7和FF 15.0.1上按预期执行（根据选择resize下拉列表）但在Chrome 23.0.1271.91上总是最终大小为1？

我试图添加console.log并实际看到发生了什么，似乎resizefunction在Chrome中触发两次，但作为jQuery的新手，我不确定我是否完全理解传递对象。

       var vt = new Array('1','2','3','4','5'); var x = 1; function addopts(ddl) { console.log(ddl); for ( var i = 0; i < vt.length; i++ ) { var v = i * x; $(ddl).append("" + v + ""); } console.debug(ddl); vt.push(x); x++; // our list changes } function resize(ddl) { console.log(ddl); ddl.size = $(ddl).val(); $(ddl).empty(); // in case our list needs to change completely console.log(ddl); addopts(ddl); console.log(ddl); } jQuery(document).ready(function() { console.log(this); $('#group').change(function() { console.log(this); resize(this); }); });    
  1 2 3 4 5  
   

↪ 在JSFiddle上查看此代码

有任何见解赞赏。

Answer 1

这确实似乎是Chrome在两个方面的问题。 经过大量测试后，我在Chrome 23和24中发现了以下问题

1. jQuery的.change &&。on（“更改” 以及 JavaScripts .onchange函数确实只在chrome中触发两次
   • 我没有答案，所以我找到了一个解决方法，我将在下面发布

2. Chrome似乎没有可用于渲染选择框的奇数编号。

   • Chrome似乎会调整为最接近的偶数（我认为我注意到了它）以重新渲染选择框。

   • 更新进一步的测试表明（至少在第24版）这种渲染只发出偶数，仅适用于0到4的大小！

我提到的解决方法就像扔一个计时器一样简单，以便将select设置为一个新实例，从而否定了双重火灾。 原谅我，如果我的术语sux，点是，它有助于chrome只在更改时触发一次并且不会影响其他浏览器（据我所知）

我也冒昧地重写你的代码，只是为了让我更容易阅读（你的代码似乎有点“扩展”）

示例jsFiddle

我使用的脚本

 var vt = new Array('1','2','3','4','5'), x = 1; // Since jQuery 1.1+ (i think) you no longer need the long written `$(document).ready`. // Now you can do the same thing with the short-hand below $(function() { // The selector you get. The .on() function is relativly new to jQuery and simply provides an easy way to bind events to elements // You can also use .off to unbind a function to an element, for instance, i could wrap the inner function in a func named `reSize` // and then add it and remove it with: // - To add event: $("#group").on("change", reSize) // - To remove event: $("#group").off("change", reSize) $("#group").on("change", function(e) { // I create a variable of $(this) simply to pass it to the Timer function var $this = $(this); setTimeout(function() { // basic JavaScript here // Prop is also kind of new to jQuery. You used to just use `.attr()`, but now jQuery distinguishes between Attributes and Properties // Since "size" is a Property of the select element, I use .prop to get/set the value // In this case I'm of course setting the size to the current value // One nice feature of jQuery you'll see here is "chaining" // as you notice, i added the `.empty` to the end, since each jquery function generally returns the element object you started with // Of course, had I only been GETting the value of size, this would not be the case $this.prop("size", $this.val()).empty(); for (i=0;i", { text: v, value: v })); $this.append($("").val(v).text(v)); } vt.push(x); // more basic JavaScript x++; // The following was used for debugging on the fiddle console.log(x) $("#selectSize").text($this.prop("size")); }); }); }) 

一些有用的** jQuery **链接

• StackOverflow在jQuery上的NFO （很多很好的例子）
• 。准备（）
• .on（）,. off （）
• .prop（）,. attr （）
• 。附加（）

只是为了帮助你。 如果您想再次使用独立function，则以下内容与上述内容完全相同，但function是独立的，因此适用于任何选择。

 var vt = new Array('1','2','3','4','5'), x = 1; function reSizeSelect(e) { var $this = $(this); setTimeout(function() { $this.prop("size", $this.val()).empty(); for (i=0;i").val(v).text(v)); } vt.push(x); x++; console.log(x) $("#selectSize").text($this.prop("size")); }); } $(function() { $("#group").on("change", reSizeSelect); })