Jquery 네임 스페이스가 예상대로 작동하지 않습니다.

Question

사용자가 옵션을 선택하도록 드롭 다운을 시뮬레이트하는 jquery 구성 요소를 상속 받았습니다.

구성 요소는 http://jsfiddle.net/Qg9f4/2/에서 볼 수 있으며 정상적으로 작동하는 것 같습니다.

그러나 우리는 모든 스크립트를 단일 파일로 이름 지정하려고합니다. 일반적으로 이것은 this thread에 따라 정상적으로 작동합니다. 그러나이 구성 요소는 네임 스페이스에 동일한 기술을 사용하면 작동을 멈 춥니 다. init 스크립트는 $ (document) .ready에서 파싱하는 것처럼 보이지만 구성 요소를 클릭 할 때 실제로 아무 것도 발생하지 않습니다.

jsfiddle에서 무엇이 효과가 있으며 작동하지 않는지에 대해 의견을 말했습니다.

이이 나던 작업

$(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(function(){zxcf.init()}); 

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(zxcf.init); 

를 A zxcf.init()와 준비와 $.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); 

Answer 4

다음과 같이 Demo