본문 바로가기

꿀팁 활용/메모정리

자바스크립트 동작안됨

<HTML> 부분

<li>
	<label>
		<input type="radio" class="ins-radio" name="ra1">
		<div id="detailOP3" name="detailOP3" class="oppayA">
			<p class="t1"><span class="choiceop">파킹 어시스트<br>
				가솔린 3.3 선택시 선택가능</span></p>
			<p class="t2">
				<strong class="oppay">2,000,000원</strong>
			</p>
		</div>
	</label>
	<em class="tipOpen"></em>
	<div class="tooltipWrap">							
		<div class="tooltip">
			전방충돌방지 보조<br>
			고속도로 주행보조<br>
			내비게이션 기반 스마트크루즈컨트롤
		</div>
	</div>						
</li>

스크립트 부분

$(function(){
    // 선택옵션 - 툴팁오픈 이벤트(클릭시 툴팁오픈) 20210705
    $(".lowCredit .tipOpen").on("click",function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active");
        }else{
            $(".lowCredit .tipOpen").removeClass("active");
            $(this).addClass("active");

        }
        return false;
    });
});

THML 은 자동차 옵션 리스트(동적) 이고

 

코드는 class=tipOpen 부분이 클릭하면 display none에서 inline 으로 바뀌는 간단한 코드다

(active 클래스를 부여하면 보이고 아니면 사라짐)

 

리스트가 동적이다 보니 ajax 로 데이터를 받고<li>태그 안쪽을

.empty();    지우고 다시

.append();   로 채우는 스크립트로 리스트를 뽑아왔는데 팁 부분 스크립트가 동작하지 않았다

 

펑션에 (document).ready 도 달아보고 이것저것 해보다가 결국

 

function Tipfunc(){
    // 선택옵션 - 툴팁오픈 이벤트(클릭시 툴팁오픈) 20210705
    $(".lowCredit .tipOpen").on("click",function(){
        if($(this).hasClass("active")){
            $(this).removeClass("active");
        }else{
            $(".lowCredit .tipOpen").removeClass("active");
            $(this).addClass("active");

        }
        return false;
    });
};

 

이런식으로 Tipfunc 으로 이름을 달고 리스트를 뽑아오는 스크립트에 넣어줘서 동작시켜 해결했다.