jQuery + - 버튼이 예상대로 값을 입력하지 않습니다.

Question

고객이 수량을 변경하거나 원하는 속성을 선택하면 웹 사이트의 가격을 업데이트하는 ajax 모듈이 있습니다. 가격이 입력 상자에 입력되면 가격이 업데이트됩니다. 사용자가 상자를 클릭 한 다음 수량을 입력하지 않고 값을 증가시키기 위해 멋진 jQuery 단추를 추가하기로 결정했습니다. 문제는 버튼을 만드는 데 사용하는 스크립트가 입력 필드의 값을 변경하더라도 가격 변경을 트리거하지 않는다는 것입니다.

내 스크립트입니다 : 가격 업데이트 프로그램이 입력 필드에 새 값을 인식하도록 내가이 기능을 할 수있는 방법이

<script language="javascript"> 
jQuery.noConflict(); 
jQuery(document).ready(function() { 
jQuery("#cartAdd").prepend('<div class="dec button">-</div>'); 
jQuery("#cartAdd").append('<div class="inc button">+</div>'); 
jQuery(".button").click(function() { 
var $button = jQuery(this); 
var oldValue = $button.parent().find("input").val(); 

if ($button.text() == "+") { 
var newVal = parseFloat(oldValue) + 1; 
} else { 
if (oldValue >= 1) { 
var newVal = parseFloat(oldValue) - 1; 
} 
} 
$button.parent().find("input").val(newVal); 
}); 
}); 
</script> 

있습니까?

Answer 1

당신은 당신이하지 않아도 '라이브'에 대해 걱정할 이벤트 위임을 사용 할 수 있습니다과 : 그렇다면, 수동으로 이벤트를 트리거하기 위해 여기에 코드를 변경 사건이 발생하면 Tetaxa가 수동으로해야 할 것입니다. 다음과 같이 입력하십시오 :

<script language="javascript"> 
    jQuery.noConflict(); 
    jQuery(document).ready(function() { 
    var $cartAdd = jQuery('#cartAdd') 
     , $quantity = $cartAdd.find('input') 
     , $price = jQuery('#price'); 

    $cartAdd.prepend('<div class="dec button">-</div>'); 
    $cartAdd.append('<div class="inc button">+</div>'); 

    $cartAdd.click(function(evt) { 
     var $incrementor = jQuery(evt.target) 
     , quantity = parseInt($quantity.val(), 10); 

     if($incrementor.hasClass('inc')) { 
     quantity += 1; 
     } else if($incrementor.hasClass('dec')) { 
     quantity += -1; 
     } 

     if(quantity > 0) { 
     $quantity.val(quantity).change(); 
     } 
    }); 

    $quantity.change(updatePrice); 

    function updatePrice() { 
     var price = 15.50 
     , quantity = parseInt($quantity.val(), 10); 
     $price.text(quantity * price); 
    } 
    }); 

</script> 

작동 코드는 jsFiddle입니다.

편집 : 수량 입력에 대한 변경 이벤트를 처리하는 코드를 추가했습니다.

편집 2 : 문제가 지금 무엇인지 확인합니다. 소스를 살펴본 후에는 텍스트 입력에 대해서만 onkeyup을 찾고 있으므로 변경을 트리거해도 아무런 효과가 없습니다.

 if(quantity > 0) { 
     $quantity.val(quantity).change(); 
     } 

을 대신 나중에 명시 적으로 버튼을 추가로

 if(quantity > 0) { 
     $quantity.val(quantity); 
     xhr.getPrice(); 
     } 

Answer 2

당신은 페이지가

jQuery(document).on('click','.button',function(){ 
//Code here 
}); 

문서 내가 제대로 이해하면 .on()

Answer 3

try this 1... 

    jQuery(".button").on('click',(function() { 
    var $button = jQuery(this); 
    var oldValue = $button.parent().find("input").val(); 

    if ($button.text() == "+") { 
    var newVal = parseFloat(oldValue) + 1; 
    } else { 
    if (oldValue >= 1) { 
    var newVal = parseFloat(oldValue) - 1; 
    } 
    } 
    $button.parent().find("input").val(newVal); 
    }); 

Answer 4

로드 한 후로드되는 요소에 대한 위임 기능을 사용할 필요, 입력 필드에 값이 변경 , 그러나 트리거되지 않은 변경 이벤트에 연결된 이벤트 핸들러가 있습니까? 맞습니까? 당신이 변화를 찾고 있다면

$button.parent().find("input").val(newVal).change();