동적으로 생성 된 라디오를 사용하여 var에 숫자 (+ =)를 추가 할 수 없습니다.

Question

희망 사항이 올바르게 나타났습니다. 그래서 일부 CMS가 제품 옵션으로로드되는 라디오가 있습니다. 같은 페이지에서 AJAX 필터를 사용하면 정확히 동일한 라디오를 정확한 위치에로드 할 수 있습니다.

이 동적으로 생성 된 라디오로 전체 가격을 변경할 수는 없지만 이전 제품은 정상적으로 작동합니다. 가장 잘 이해할 수 있도록 스 니펫을 실행하십시오.

$('#add').on('click', function() { 
 
    if (!$('#price_3').length) { 
 
    $('#multiply').before('<input type="radio" name="radios" id="price_3" value="3"> <label for="price_3">Generated by AJAX</label> <br><br>'); 
 
    $(this).remove(); 
 
    } 
 
}) 
 

 
$("input").bind("change keyup", function() { 
 
    var price = 100; 
 

 
    if ($('#price_1').is(':checked')) { 
 
    price += 100; 
 
    }; 
 

 
    if ($('#price_2').is(':checked')) { 
 
    price += 200; 
 
    }; 
 

 
    if ($('#price_3').is(':checked')) { 
 
    price += 300; 
 
    $(".total").append("&nbsp;<- doesn't change the price"); 
 
    $(".info").html("<br><br> Actually adds +300, but not live"); 
 
    }; 
 

 
    if ($('#multiply').is(':checked')) { 
 
    price *= 2; 
 
    }; 
 

 
    $(".total").html(price); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="#" method="post"> 
 
    <input type="radio" name="radios" id="price" value="0" checked> 
 
    <label for="price">I'm a base</label> 
 
    <br> 
 
    <input type="radio" name="radios" id="price_1" value="1"> 
 
    <label for="price_1">Here by default</label> 
 
    <br> 
 
    <input type="radio" name="radios" id="price_2" value="2"> 
 
    <label for="price_2">Here by default 2</label> 
 
    <br> 
 
    <input type="checkbox" name="multiply" id="multiply" value="multiply"> 
 
    <label for="multiply">Multiply by 2</label> 
 
    <br> 
 
    <input type="button" id="add" value="Add a radio"> 
 
    <br> 
 
    <span class="total">100</span> 
 
    <span class="info"></span> 
 
</form>

편집 1. 실제로 가 추가를 수행하지만 단지 change에 표시되지 않기 때문에 일이 ajax 또는 on를 비동기 것으로 간주되지 않는다. 나는 사건으로 무언가를 엉망으로 만들고있어.

Answer 1

, 나는 이벤트와 엉망했다. 따라서 해결 방법은 기존 change keyup 내부에 동적으로 추가 된 라디오에 새 이벤트를 사용하지 않고 해당 이벤트를 새 라디오에 위임하는 것입니다.

$("form").bind("change keyup", "#price_3", function() { // note, that I'm using very big form in the project, so I'm unable to delegate just to input 
    var price = 100; 

    if ($('#price_1').is(':checked')) { 
    price += 100; 
    }; 

    if ($('#price_2').is(':checked')) { 
    price += 200; 
    }; 

    if ($('#price_3').is(':checked')) { 
    price += 300; 
    }; 

    $(".total").html(price); 
}) 

은 자세한 내용은 바이올린을 참조하십시오 https://jsfiddle.net/shnn032o/8/

[? 내가 비동기 호출의 응답을 반환 할 방법] (의

Answer 2

이벤트 처리기는 다른 이벤트가 발생하지 않고 실행됩니다. 그래서 가격은 결코 정해지지 않습니다. 이벤트 처리기를 위임하고 데이터를 가져옵니다. 예를 들어

:

예상대로

$('#add').on('click', function() { 
    if(!$('#price_3').length) { 
    $(this).before('<input type="radio" name="radios" id="price_3" value="3"> <label for="price_3">Generated by AJAX</label> <br><br>'); 
    } 
}) 

$("form").bind("change keyup", "input", function (e) { 
    var price = 299; 

    switch (e.target.id) { 
    case 'price_1': 
     price += 100; 
     break; 
    case 'price_2': 
     price += 200; 
     break; 
    case 'price_3': 
     price += 300; 
     break; 
    }; 

    $(".total").html(price); 
}); 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="#" method="post"> 
    <input type="radio" name="radios" id="price" value="0" checked> <label for="price">I'm a base</label> <br> 
    <input type="radio" name="radios" id="price_1" value="1"> <label for="price_1">Here by default</label> <br> 
    <input type="radio" name="radios" id="price_2" value="2"> <label for="price_2">Here by default 2</label> <br> 
    <input type="button" id="add" value="Add a radio"> <br> <br> 
    <span class="total">299</span> 
    <span class="info"></span> 
</form>