Chrome bug或jQuery bug？ [英] Chrome bug or jQuery bug?

问题描述

为什么下面的代码在IE 7和FF 15.0.1上按预期工作（根据选择调整下拉列表），但在Chrome 23.0.1271.91上总是以大小1结束？

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

 <！DOCTYPE HTML PUBLIC -  // W3C // DTD HTML 4.01 Transitional // EN> 
< html> 
< head> 
< meta http-equiv =content-typecontent =text / html; charset = windows-1250> 
< title>< / title> 
 
< script type =text / javascriptsrc =jquery-1.8.3.min.js>< / script> 
< script type =text / javascript> 
 
 var vt = new Array（'1'，'2'，'3'，'4'，'5'）; 
 var x = 1; 
 
函数addopts（ddl）{
 console.log（ddl）; 
 for（var i = 0; i< vt.length; i ++）{
 var v = i * x; 
 $（ddl）.append（< option value ='+ v +'>+ v +< / option>）; 
} 
 console.debug（ddl）; 
 
 vt.push（x）; 
 x ++; //我们的列表更改
 
 
 function resize（ddl）{
 
 console.log（ddl）; 
 
 ddl.size = $（ddl）.val（）; 
 $（ddl）.empty（）; //如果我们的列表需要完全更改
 console.log（ddl）; 
 
 addopts（ddl）; 
 console.log（ddl）; 
 
 
 jQuery（document）.ready（function（）{
 console.log（this）; 
 $（'＃group'）。change（function （）{
 console.log（this）; 
 resize（this）; 
}）; 
}）; 
 
< / script> 
 
< / head> 
< body> 
< form> 
< select id ='group'size ='1'> 
< option value ='1'> 1< / option> 
< option value ='2'> 2< / option> 
< option value ='3'> 3< / option> 
< option value ='4'> 4< / option> 
< option value ='5'> 5< / option> 
< / select> 
< / form> 
< / body> 
< / html> b 
 
 
 
 $ b 
 >在JSFiddle上查看此代码 
 
 
 
任何见解都会被赞赏。
解决方案
这确实是Chrome在2个方面的问题。经过大量测试后，我在 BOTH  Chrome 23和24中发现了以下问题：  
 $ b 
 
 
 jQuery的.change&& .on（change以及 JavaScripts.onchange函数确实只在chrome中触发两次
 
 
 
 
我没有回答这个，我发现了一个解决方法，我会在下面发布
 
 
 
 
 
 
 Chrome似乎没有 odd 
 em>编号大小可用于呈现选择框。
 
 
 
 
 
 
 Chrome似乎调整到最接近的偶数（我想我注意到它）为了重新呈现选择框。
 
 
 
  更新 进一步的测试显示（至少在第24版中）这个渲染为偶数的问题，只适用于0到4的尺寸！
  
   
  ol> 
 
 
我提到的解决方法与投入定时器一样简单，以便将select设置为新实例，从而消除双重火灾。请原谅我，如果我的术语sux，point是的，它有助于Chrome在更改时只触发一次，并且不会影响其他浏览器（到目前为止正如我发现的那样）
 
 
 
我也冒昧地重写了一下你的代码，只是为了让我更容易阅读（你的代码看起来有点扩展）
 
 
 
  
示例jsFiddle 
  
 
 
 脚本我使用
 
 
 
 
 
  var vt = new Array（'1'，'2'，'3'，'4'，'5'），
x = 1; 
 
 //由于jQuery 1.1+（我认为）你不再需要长的'$（document）.ready`。 
 //现在你可以在
 $（function（）{
）下使用同样的方法来做同样的事情//你得到的选择器.on（）函数相对来说是新的jQuery并简单地提供了一种简单的方法来将事件绑定到元素
 //您也可以使用.off将一个函数解除绑定到一个元素，例如，我可以将内部函数包装在一个名为`reSize`的函数中
 //然后添加并删除它：
 //  - 添加事件：$（＃group）。on（change，reSize）
 //  - 删除事件：$（＃group）。off（change，reSize）
 $（＃group）。on（change，function（e）{
 //我创建一个变量（this）只是将它传递给Timer函数
 var $ this = $（this）; 
 setTimeout（function（）{//基本JavaScript在这里
 // Prop也是你过去只使用`.attr（）`，但现在jQuery区分属性和属性
 //由于size是一个属性select元素，我使用.prop来获取/设置值
 //在这种情况下，我当然将大小设置为当前值
 //您将看到jQuery的一个很好的功能这里是链接
 //如你注意到的那样，我在末尾加了`.empty`，因为每个jquery函数通常返回以
开头的元素对象//当然，如果我只一直在获取大小的值，这不会是这种情况
 $ this.prop（size，$ this.val（））。empty（）; 
 for（i = 0; i< vt.length; i ++）{//这里的基本JavaScript 
 var v = i * x; //你的初始设置
 //在这里，我用更易读的代码替换了你的附加函数。 
 //在jQuery中有几种方法可以做到这一点，但是
 //碎片字符串并没有真正被建议
 //这也可以写成：
 // $ this.append（$（< option />，{text：v，value：v}））; 
 $ this.append（$（< option />\").val(v).text(v））; 
} 
 vt.push（x）; //更基本的JavaScript 
 x ++; 
 //以下内容用于调试小提琴
 console.log（x）
 $（＃selectSize）。text（$ this.prop（size））; 
}）; 
}）; 
}）
  
 
 
 
一些有用的** jQuery **链接
 
 
 
 
 
  StackOverflow的jQuery上的NFO （很多很好的例子）
 
 
  .ready（） 
 
 
  .on（）， .off（） 
 
 
 ， .attr（） 
 
 
  .append（） 
 
 
 
 
 
 
 
只是为了帮助你。如果您想再次使用独立函数，则以下内容与上述内容完全相同，只是该函数是单独的，因此适用于任何select。
 
 
 
 
 
  var vt = new Array（'1'，'2'，'3'，'4'，'5'），
x = 1; 
 
函数reSizeSelect（e）{
 var $ this = $（this）; 
 setTimeout（function（）{
 $ this.prop（size，$ this.val（））。empty（）; 
 for（i = 0; i< vt.length ; i ++）{
 var v = i * x; 
 $ this.append（$（< option />\").val(v).text(v））; 
）
 vt.push（x）; 
 x ++; 
 console.log（x）
 $（＃selectSize）。text（$ this.prop（size ））; 
}）; 
 
 
 $（function（）{
 $（＃group）。on（change，reSizeSelect）; 
}）
  
 
Why does the following code do as expected ( resizes drop down list based on selection ) on IE 7 and FF 15.0.1 but always ends up size 1 on Chrome 23.0.1271.91? 

I've tried to add console.log and actually see what is happening, and it seems that the resize function is firing twice in Chrome, but being a newbie at jQuery, I'm not sure I quite understand passing objects yet.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <title></title>

  <script type="text/javascript" src="jquery-1.8.3.min.js"></script>          
  <script type="text/javascript">                                         

   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("<option value='" + v + "'>" + v + "</option>");
       }
       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);
        });
    });

  </script>                                                               

  </head>
  <body>
    <form>
     <select id='group' size='1'>
      <option value='1'>1</option>
      <option value='2'>2</option>
      <option value='3'>3</option>
      <option value='4'>4</option>
      <option value='5'>5</option>
     </select>
    </form>
  </body>
</html>
↪ View this code at JSFiddle

Any insight appreciated.
解决方案
This does indeed appear to be an issue with Chrome in 2 respects. After much testing I found the following problems in BOTH Chrome 23 and 24

jQuery's .change && .on("change" as well as JavaScripts .onchange function does indeed fire twice only in chrome


I have no answer for this, tho I have found a workaround I will post below

Chrome does not appear to have odd numbered sizes available for rendering select boxes.


Chrome appears to resize to the nearest even number ( i think i noted it rounds up ) in order to re-render the select box.
UPDATE Further testing has shown (at least in ver 24) that this rendering to even numbers only issue, ONLY applies to sizes 0 through 4!

The Workaround I mentioned is as simple as throwing in a timer in order to set the select to a new instance, thus negating the double fire. Forgive me if my terminology sux, point is, it helps chrome to fire only once on change and does not affect other browsers (so far as i have found)

I also took the liberty of rewriting your code a little, just simply to make it easier for me to read (your code seemed a bit "extended")

Example jsFiddle

  
Script i used


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<vt.length;i++) { //  basic JavaScript here
                var v = i*x;    //  your initial setup
                //  Here I replaced the append function you had with much more readable code.
                //  There are several ways to do this in jQuery, however
                //      fragmented Strings are not ever really suggested
                //  This could have also been written:
                //      $this.append($("<option />", { text: v, value: v }));
                $this.append($("<option />").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"));
        });
    });
})


Some Helpful **jQuery** Links


StackOverflow's NFO on jQuery (Lot of good examples)
.ready()
.on(), .off()
.prop(), .attr()
.append()



  
And just to help you out. If you want it in an independent function again, the following is the exact same as the above, except the function is separate and therefor applicable to any select.


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<vt.length;i++) {
            var v = i*x;
            $this.append($("<option />").val(v).text(v));
        }
        vt.push(x);
        x++;
        console.log(x)
        $("#selectSize").text($this.prop("size"));
    });
}

$(function() {
    $("#group").on("change", reSizeSelect);
})


                        
这篇关于Chrome bug或jQuery bug？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！