하하22
349
2020-04-03 23:45:41 작성 2020-04-03 23:51:12 수정됨
0
139

자바스크립트 이벤트 중복 실행 문제...


  20줄의<img src="/imgs/쿠폰 적용.PNG">을 클릭하면 33줄 코드의 모달창을 띄웁니다.

모달창을 띄우면 <input class="radio-disPrice"> (50줄) 부분을 체크가 되게 했습니다.

체크가 되면 onclick="calculateDiscountPrice(...)" (51줄)  이벤트가 실행이 되는데,

문제는 한번이 아니라 3번 실행이 돼서 

"/coupon/isUsedInTest.hta?couponNo="<< 이 ajax가 3번 실행됩니다.

왜 여러번 실행되는 걸까요??


<div class="row">
   <div class="col-sm-9">
   <form action="/order/ordertests.hta" method="post" class="form-horizontal">
  <table class="table table-bordered" id="test-table" >
 <tbody>
      <c:forEach var="test" items="${tests }" varStatus="loop">
     <tr>
        <td>
            ${loop.count }<input type="hidden" class="form-control" 
            name="testno" value="${test.no }"/>
        </td>
        <td>${test.name } > ${test.ep } 
        	<a onclick="applyCoupon(${test.price},event, ${test.no })"
        	class="a-coupon" href="" style="margin-left: 20px">
        		<img src="/imgs/쿠폰 적용.PNG">
        	</a>
        	</td>
        <td id="td-coupon-apply-price-${test.no }">
              <fmt:formatNumber>${test.price }</fmt:formatNumber>원
        </td>
     </tr>
  </c:forEach>
     </tbody>
  </table>
  </form>
   </div>
   </div>

   <div id="modal-my-coupons" class="modal fade" role="dialog">
  <div class="modal-dialog modal-lg">

 <div class="modal-content"  style="padding: 10px;">
<div class="modal-header">
   <button type="button" class="close" data-dismiss="modal">&times;</button>
   <p style="font-size: 24px;" class="modal-title">내쿠폰함</p>
</div>
<div class="modal-body">	
<c:choose>
<c:when test="${not empty coupons}">
<div class="radio" id="modal-radio">
<c:forEach var="coupon" items="${coupons }">
<c:choose>
	<c:when test="${coupon.discountPrice != 0 }">
	<p>
		<label style="font-size: 12px;">
		<input class="radio-disPrice" 
			onclick="calculateDiscountPrice(${coupon.discountPrice}, ${coupon.no })" 
			id="coupon-${coupon.no }"
			name="radio-coupon" 
			value="${coupon.no }" 
			type="radio">
		<span style="font-size: 14px; font-weight: bold;">
			${coupon.discountPrice }
		</span>원 할인
		<span style="margin-left: 10px;">${coupon.title }
		</span>
		</label>	
	</p>
</c:when>
</c:choose>
</div>


자바스크립트

<script type="text/javascript">
var testNo;
	
//모달 내 할인금액쿠폰을 체크했을 때 실행
function calculateDiscountPrice(disprice,couponNo){
	console.log(couponNo);
	//쿠폰 중복 여부 확인
	$.get("/coupon/isUsedInTest.hta?couponNo=" + couponNo, function(data){
		console.log(data);
		if(data){
			var status = confirm("적용된 쿠폰입니다. 이 상품에 새로 적용하시겠습니까?");
				
		} else {
			//쿠폰 모달 금액 변동
			$("#coupon-disprice").text(disprice);
			var result = $("#coupon-price").text() - $("#coupon-disprice").text();
			if(result < 0){
				result = 0;
			}
			$("#coupon-total-price").text(result);
			//
		}
	})
}

//상품 리스트에서 쿠폰 적용 클릭 시
function applyCoupon(price, event, no){
	
	event.preventDefault();
	testNo = no;
        $("#modal-radio :radio").prop("checked", false);
	$.get("/coupon/getAppliedCouponInTest.hta?testNo=" + testNo, function(data){		
		$("#coupon-"+ data).click();
		$("#modal-my-coupons").modal("show"); 	
	})
}

</script>


0
0
  • 답변 0

  • 로그인을 하시면 답변을 등록할 수 있습니다.