Isotope는 아이템 필터링과 정렬을 위한 강력한 라이브러리입니다. 아이템을 클릭했을 때 원하는 동작을 수행하기 위해서는 이벤트 처리가 필요합니다.

Isotope에서 아이템 클릭 이벤트를 처리하는 방법은 다음과 같습니다:

1. Isotope 컨테이너 선택하기: 아이템 클릭 이벤트를 처리할 Isotope 컨테이너를 선택합니다. 일반적으로 $('.grid')와 같이 jQuery 선택자를 사용하여 선택할 수 있습니다.

2. 아이템 클릭 이벤트 리스너 등록하기: 선택한 Isotope 컨테이너에 대해 on() 메서드를 사용하여 아이템 클릭 이벤트를 리스닝하고, 클릭 이벤트 발생시 실행될 콜백 함수를 등록합니다. 예를 들어:

   $('.grid').on('click', '.grid-item', function() {
     // 아이템 클릭시 실행될 코드 작성
   });
   

   위의 예제에서 .grid-item은 클릭 이벤트를 처리할 아이템의 클래스 또는 선택자입니다. 만약 이벤트를 모든 아이템에 대해 처리하고 싶다면 .grid-item 대신 .grid를 사용할 수도 있습니다.

3. 클릭 이벤트 콜백 함수 작성하기: 등록한 클릭 이벤트 콜백 함수에는 아이템 클릭시 수행될 로직을 작성합니다. 예를 들어, 클릭한 아이템의 데이터를 읽거나 다른 동작을 실행할 수 있습니다.

   $('.grid').on('click', '.grid-item', function() {
     // 아이템 클릭시 실행될 코드 작성
     var itemId = $(this).data('id');
     console.log('클릭한 아이템의 ID:', itemId);
     // 원하는 동작 수행
   });
   

   위의 예제에서 $(this)는 클릭된 아이템을 가리키는 jQuery 객체입니다. data('id')를 사용하여 클릭한 아이템에서 데이터를 읽어올 수 있습니다.

위와 같이 Isotope에서 아이템 클릭 이벤트를 처리하면, 클릭 이벤트가 발생한 아이템에 따라 원하는 동작을 수행할 수 있습니다.

참고 자료:

• Isotope 공식 문서
• jQuery on() 메서드 문서