값이 변경 될 때 자바 스크립트 코드를 다시 실행하십시오

Question

두 파일이 있습니다 : 아래 코드와 함께 html 파일과 자바 스크립트 파일 (<span id="quantity">에 대한 값을 만듭니다)이 코드는 제대로 작동하지만 단어는 다음과 같이 변경됩니다. 전체 페이지를 새로 고칩니다.

'수량'이 ​​변경되는 즉시 '기사'에서 '기사'로 또는 그 반대로 변경하고 싶습니다. 이것이 가능한가? 그렇다면 어떻게?

<span id="quantity" class="simpleCart_quantity"></span> 
<span id="quantityText"></span> 

<script type="text/javascript"> 

     $(window).load(function() 
     { 
     var quantity = document.getElementById("quantity"), 
      quantityText = document.getElementById("quantityText"); 
     if (parseInt(quantity.innerHTML, 10) === 1) { 
      quantityText.innerHTML = "article"; 
     } else { 
      quantityText.innerHTML = "articles"; 
     } 
     }); 

</script> 

Answer 1

Knockout JS과 같은 MVVC 프레임 워크를 살펴볼 수 있습니다. 예를 들어 #quantity<span></span> 요소의 내용을 관찰 가능으로 설정합니다.

그러나 희망하는 것과 유사한 해결책을 찾으려면 this SO thread을 읽어보십시오. 요약하면 변경 이벤트는 브라우저에서만 양식 필드 흐림 현상이 발생하므로 $("#quantity").trigger('change')

일단 DOM 요소를로드 한 후에 트리거를 설정하면 다음을 수행 할 수 있습니다. 다음

$('#myParentNode').on('change','#mynum', function() { 
    // Add your logic in here 
    $('#quantityText').text('articles') .... .. .. ..... 
}); 

Answer 2

일반적으로을의 span 요소는 change 이벤트가 발생하지 않습니다, 그래서 당신은 일반적으로 input 요소에서하는 것처럼 당신은 여기에 등록 할 수 없습니다.

그러나 동일한 코드에서 jQuery를 사용하여 이러한 이벤트를 트리거 할 수 있습니다.이 이벤트는 스팬의 값을 변경합니다 (일반적으로 span이 값을 변경하지 않기 때문에 이러한 코드가 있다고 가정합니다).

다음은이 변경을 10 초마다 시뮬레이트하고 change 이벤트를 트리거하는 예제입니다. 또한 다른 스팬의 값을 복제하는 해당 변경 이벤트에 대한 핸들러도 포함됩니다.

<span id="quantity" class="simpleCart_quantity">1</span> 
<span id="quantityText"></span> 

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

<script type="text/javascript"> 

$(document).ready(function() { 
    var quantity = $("#quantity"), 
     quantityText = $("#quantityText"); 

    setInterval(function() { 
     var currentVal = parseInt(quantity.html()); 
     if (currentVal >= 10) { 
      quantity.html(1); 
     } 
     else { 
      quantity.html(currentVal + 1); 
     } 
     quantity.trigger('change'); 
    }, 10000); 

    quantity.on('change', function(sender, args) { 
     quantityText.html($(this).html()); 
    }); 
}); 

</script>