jquery show() 回调问题

为什么点击两次“显示”按钮，代码才会正常运行，请在IE中调试。
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>
<title>无标题文档</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</head><body>
  为什么点击两次“显示”按钮，代码才会正常运行，请在IE中调试。<br />
<input id="btn" type="button" value="显示" /><div id="xxx" style="display: none; " >
    <form>
      <input type="password" placeholder="各位好1" />
    </form>
</div>
</body><script type="text/javascript">
  $("#btn").click(function(){
    $("#xxx").show(0,jQuery.placeholder.shim());
});
(function($) {
  // @todo Document this.
  $.extend($,{ placeholder: {
      browser_supported: function() {
        if($.browser.msie || $.browser.opera)
        {
          return false;
        }         
        return this._supported !== undefined ?
          this._supported :
          ( this._supported = !!('placeholder' in $('<input type="text">')[0]) );
      },
      shim: function(opts) {
        var config = {
          color: '#f00',
          cls: 'placeholder',
          selector: 'input[placeholder], textarea[placeholder]'
        };
        $.extend(config,opts);
        return !this.browser_supported() && $(config.selector)._placeholder_shim(config);
      }
  }});  $.extend($.fn,{
    _placeholder_shim: function(config) {
      function calcPositionCss(target)
      {
        var op = $(target).offsetParent().offset();
        var ot = $(target).offset();        return {
          top: ot.top - op.top,
          left: ot.left - op.left,
          width: $(target).width()
        };
      }
      return this.each(function() {
        var $this = $(this);        if( $this.is(':visible') ) {          if( $this.data('placeholder') ) {
            var $ol = $this.data('placeholder');
            $ol.css(calcPositionCss($this));
            return true;
          }          var possible_line_height = {};
          if( !$this.is('textarea') && $this.css('height') != 'auto') {
            possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' };
          }          var ol = $('<label />')
            .text($this.attr('placeholder'))
            .addClass(config.cls)
            .css($.extend({
              position:'absolute',
              display: 'inline',
              float:'none',
              overflow:'hidden',
              textAlign: 'left',
              color: config.color,
              cursor: 'text',
              paddingTop: $this.css('padding-top'),
              paddingRight: $this.css('padding-right'),
              paddingBottom: $this.css('padding-bottom'),
              paddingLeft: $this.css('padding-left'),
              fontSize: $this.css('font-size'),
              fontFamily: $this.css('font-family'),
              fontStyle: $this.css('font-style'),
              fontWeight: $this.css('font-weight'),
              textTransform: $this.css('text-transform'),
              backgroundColor: 'transparent',
              zIndex: 99
            }, possible_line_height))
            .css(calcPositionCss(this))
            .attr('for', this.id)
            .data('target',$this)
            .click(function(){
              $(this).data('target').focus();
            })
            .insertBefore(this);
          $this
            .data('placeholder',ol)
            .keypress(function(){
              ol.hide();
            })
            .focus(function(){
              ol.css('color','#0f0');
            })
            .blur(function() {
              ol[$this.val().length ? 'hide' : 'show']();
              ol.css('color','#f00');
            }).triggerHandler('blur');
          $(window)
            .resize(function() {
              var $target = ol.data('target');
              ol.css(calcPositionCss($target));
            });
        }
      });
    }
  });
})(jQuery);
</script></html>

解决方案 »

  1.   

    $("#btn").click(function(){
        $("#xxx").show(0,function(){jQuery.placeholder.shim();});
    });
      

  2.   

    因为第一次点击的时候会先执行jQuery.placeholder.shim()，才会执行show。
    show方法第二个参数是一个方法，但是你jQuery.placeholder.shim()返回的是$(config.selector)._placeholder_shim(config)，所以第一次是会报错的。。虽然报错了，但是_placeholder_shim方法执行成功了，但是第一次的时候input还是不可见的，所以没有执行里面的CSS克隆过程，第二次点击的时候是可见的，所以代码运行正常了。