Jqueryネームプスが期待どおりに動作しない

Question

私は、ユーザーがオプションを選択するためのドロップダウンをシミュレートするjqueryコンポーネントを継承しています。

コンポーネントはhttp://jsfiddle.net/Qg9f4/2/にあり、正常に動作しているようです。

しかし、すべてのスクリプトを1つのファイルに名前を付けようとしています。一般的に、これはthis threadに従って正常に動作します。しかし、このコンポーネントは、名前空間に同じテクニックを使用すると動作しなくなります。 initスクリプトは$（document）.readyの解析をうまく行っているようですが、コンポーネントをクリックすると実際には何も起こりません。

私はjsfiddleの中で、何が動作しているかどうかについてコメントしています。

これは、このdoesntの仕事

$(document).ready(zxcf.init()); 

var zxcf = { 
    init: function() { 
     $(".dselector dt a").click(function() { 
      $(".dselector dd ul").toggle(); 
     }); 

     $(".dselector dd ul li a").click(function() { 
      $(".dselector dd ul").hide(); 
     }); 

     $(document).bind('click', function (e) { 
      var $clicked = $(e.target); 
      if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide(); 
     }); 
    } 
}; 

Answer 1

あなたはそれを初期化してきましたzxcf変数前に使用している

$(document).ready(function() { 

    $(".dselector dt a").click(function() { 
     $(".dselector dd ul").toggle(); 
    }); 

    $(".dselector dd ul li a").click(function() { 
     $(".dselector dd ul").hide(); 
    }); 

    $(document).bind('click', function (e) { 
     var $clicked = $(e.target); 
     if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide(); 
    }); 
}); 

動作します。

これは、ready()ハンドラがすぐに呼び出されるため、zxcfがまだ初期化されていないことを意味します。

http://jsfiddle.net/UtSmC/

var zxcf = { 
    init: function() { 
     $(".dselector dt a").click(function() { 
      $(".dselector dd ul").toggle(); 
     }); 

     $(".dselector dd ul li a").click(function() { 
      $(".dselector dd ul").hide(); 
     }); 

     $(document).bind('click', function (e) { 
      var $clicked = $(e.target); 
      if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide(); 
     }); 
    } 
}; 

$(document).ready(zxcf.init); // <-- pass it instead of invoking it 

http://jsfiddle.net/UtSmC/

また、あなたは機能を呼び出す代わりに.ready()に渡すです。

Answer 2

変数を定義する前にzxcfという変数を使用しているからです。ネームスペースを最初に定義してから使用する必要があります。これを試して。

var zxcf = { 
    init: function() { 
     $(".dselector dt a").click(function() { 
      $(".dselector dd ul").toggle(); 
     }); 

     $(".dselector dd ul li a").click(function() { 
      $(".dselector dd ul").hide(); 
     }); 

     $(document).bind('click', function (e) { 
      var $clicked = $(e.target); 
      if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide(); 
     }); 
    } 
}; 
$(document).ready(zxcf.init); 

の作業Demo

Answer 3

あなたは変数を初期化した後

var zxcf = { 
init: function() { 
    $(".dselector dt a").click(function() { 
     $(".dselector dd ul").toggle(); 
    }); 

    $(".dselector dd ul li a").click(function() { 
     $(".dselector dd ul").hide(); 
    }); 

    $(document).bind('click', function (e) { 
     var $clicked = $(e.target); 
     if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide(); 
    }); 
} 
}; 

$(document).ready(function(){zxcf.init()}); 

Answer 4

zxcf.init()と準備してあなたの呼び出し$.ready()下に示すように、document.ready関数を呼び出します。しかし、その後はzxcfが衰えました。だから$.ready()を呼び出すと、zxcfは定義されていないので、試してみるとエラーが発生し、定義されていない場合はinitを呼び出します。問題は、あなたが名前の関数を使用する代わりに変数に関数を格納していることである：

$(document).ready(zxcf.init); 

function zxcf() { 
    this.init= function() { 
     $(".dselector dt a").click(function() { 
      $(".dselector dd ul").toggle(); 
     }); 

     $(".dselector dd ul li a").click(function() { 
      $(".dselector dd ul").hide(); 
     }); 

     $(document).bind('click', function (e) { 
      var $clicked = $(e.target); 
      if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide(); 
     }); 
    } 
}; 

それとも、コールready前に変数をdeglare：

var zxcf = { 
    init: function() { 
     $(".dselector dt a").click(function() { 
      $(".dselector dd ul").toggle(); 
     }); 

     $(".dselector dd ul li a").click(function() { 
      $(".dselector dd ul").hide(); 
     }); 

     $(document).bind('click', function (e) { 
      var $clicked = $(e.target); 
      if (!$clicked.parents().hasClass("dselector")) $(".dselector dd ul").hide(); 
     }); 
    } 
}; 

$(document).ready(zxcf.init);