나쁜 벽돌 요소 : null - 워드 프레스 사용

Question

나는 php에서 wordpress plugin을 쓰고있다. 그 플러그인에서 나는 작은 텍스트로 그림을 출력하고 그것을 벽돌로하고 싶다. 나는 HTML에 벽돌을 초기화하면

, 작동하는 것 같다,하지만 사진은 중복 (? 같은 개발자) 따라서 나는 "Imagesloaded"를 사용하는 것을 시도하고있다

<div id="container" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'> 

.

하지만 ImageLoaded를 사용하려면 먼저 Masonry를 설치하고 자바 스크립트를 실행해야합니다. 내 plugin_scripts.js에 벽돌을 초기화 할 때 나는 프론트 엔드에 오류가 :

plugin_scripts.js : 프론트 엔드에서

jQuery(function() { 

alert("hallo"); 
var container = document.querySelector('#container'); 
var msnry = new Masonry(container, { 
    // options 
    columnWidth: 200, 
    itemSelector: '.item' 
}); 

}); 

콘솔 오류 :

Bad masonry element: null 
masonry.min.js?ver=3.1.2:1 
q masonry.min.js?ver=3.1.2:1 
d masonry.min.js?ver=3.1.2:1 
(anonymous function) schnoogle_scripts_frontend.js?ver=3.9.2:10 
j jquery.js?ver=1.11.0:2 
k.fireWith jquery.js?ver=1.11.0:2 
n.extend.ready jquery.js?ver=1.11.0:2 
K jquery.js?ver=1.11.0:2 

당신이 도와 드릴까요?

Answer 1

벽돌이 어떤 이유로 든 컨테이너를 찾을 수없는 것 같습니다. 나는 당신이 분명히하려고 노력했다고 가정합니다. #container이 실제로 페이지에 있는지 확인하십시오.

jQuery (현재)를 사용하는 경우 jQuery의 선택기 엔진을 사용할 수 있습니다. 페이지의 나머지가 준비 후에 당신이 그것을하고있는 있도록

var $container = $('#container'); 
// initialize 
$container.masonry({ 
    columnWidth: 200, 
    itemSelector: '.item' 
}); 

이가 document.ready 호출 내에 있는지 확인하십시오.