Jquery namepsace按預期工作

Question

我已經繼承了一個jQuery組件，它模擬用戶從下拉菜單中選擇一個選項。

該組件可以在http://jsfiddle.net/Qg9f4/2/看到，它似乎工作正常。

但是，我們正在嘗試將我們的所有腳本命名爲一個文件。一般來說，這可以根據this thread正常工作。但是，當我們對命名空間使用相同的技術時，此組件停止工作。初始化腳本似乎可以很好地解析$（document）.ready，但是在單擊組件時沒有任何實際發生。

我已經在jsfiddle中評論過什麼是行不通的。

這工作

$(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(); 
    }); 
}); 

這不工作

$(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變量之前。

這意味着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

調用的document.ready函數初始化變量後，如下圖所示

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

你的呼叫$.ready()與願與zxcf.init()。但是你在這之後去掉zxcf。所以當你撥打$.ready()時，zxcf是未定義的，當你嘗試在undefined上調用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);