Jquery에서 독립적으로 작동하는 div

Question

내부에 양식이있는 독립적으로 작동하는 div를 만들려고합니다.

jquery를 사용하여 양식의 사용자 선택에 따라 제품 가격을 계산합니다. 그러나 사용자는 'cart'에 여러 항목을 추가 할 수 있으므로 양식이 다른 div에 복제됩니다. 문제는 계산 패턴이이 두 div를 분리 할 수없고 계산이 올바르지 않다는 것입니다. 양식은 또한 대화식이므로 사용자 입력에 의해 생성됩니다. 이것은 정말 복잡한 세트이며 '제품 번호'로 모든 변수의 이름을 바꾸는 것이 나에게 정말 효율적이지는 않습니다.

나는 여기 붙어있어이 문제를 해결하는 방법을 모르겠습니다. 나는 iframe을 div 안에 넣고 내 양식과 계산 스크립트를 내부에로드 한 다음 post 명령을 사용하여 제품의 가격을 '기본 페이지'로 전송하여 총 가격을 계산하는 방법을 알고있었습니다. 사용자가 원했던 모든 제품의

그러나 jQuery 스크립트가 이러한 iframe 내부에서 독립적으로 작동하지 않는 것처럼 보이지만 여전히 서로 연결되어 있으므로 연결이 끊어졌습니다.

나는이 문제를 해결하는 데 도움이되는 제안을 주시면 감사하겠습니다. 감사합니다. 여기

는 또한 사용자가 삽입 된 DIV를 제거 할 수있는 기능을 가지고있다

<!-- language: lang-javascript --> 

    $('#newProduct').click(function() 
    { 
     $('<div id="productNo'+productNumber+'">') 
     .appendTo('#div_structure') 
     .html('<label onclick="$(\'#div_productNo'+productNumber+'\').slideToggle()">Product '+productNumber +' </label>'+ 
       '<button onclick="$(\'#product'+productNumber+'\').remove()">Remove</button>'); 
     $('<div id="div_product'+productNumber+'" style="display: none;">').appendTo('#product'+productNumber+''); 
$('<iframe src="productform.html" seamless frameborder="0" crolling="no" height="600" width="1000">').appendTo('#div_product'+productNumber+''); 
     productNumber++; 
    }); 

코드 지금까지

을 Heres 몸

var productNumber = 1; 

<div id="div_structure"> 

</div> 
<button id="newProduct" >Add new product</button><br \> 

추가하는 새 항목의 .

여기에 내가 번역 된 버전을 테스트하지 않았기 때문에 그들이 제대로 작동하지 않을 수 있도록 나는 모든 변수를 번역 productform

$(document).ready(function() 
{ 
    $('#productCalculation').change(function() 
    { 
     shape = $('input[name=productShape]:checked', '#productCalculation').val(); 
     alert(shape); 
    }); 
}); 

<form id="productCalculation"> 
<div id="div_productShape" class="product1"> 
<h1>Select the shape of the product</h1> 
    <input type="radio" name="productShape" value="r1">R1</input><br \> 
    <input type="radio" name="productShape" value="r2">R2</input><br \> 
    <input type="radio" name="productShape" value="r3">R3</input><br \> 
</div> 
. 
. 
. 
</form> 

에서 불과 몇 줄입니다. 문제는 두 번째로 생성 된 div에서 선택을 시도하면 심지어 alert() 선택한 변수

Answer 1

이 코드에는 두 가지 문제점이 있습니다. 어딘가에 말하려합니다. "모든 변수를 변환 했으므로 그렇지 않을 수도 있습니다. 번역 된 버전을 테스트하지 않았기 때문에 올바르게 작동합니다. 문제는 두 번째로 생성 된 div에서 선택을 시도하면 심지어 선택된 변수 인 ""도 경고하지 않습니다. 이것은 이벤트 핸들러가 특정 순간에 DOM에있는 요소에 첨부되기 때문입니다.

당신의 다른 질문은 이다 "한마디에 내 질문이

$(document).ready(function() 
{ 
    $(document).on('change', '#productCalculation', function() 
    { 
     shape = $('input[name=productShape]:checked', '#productCalculation').val(); 
     alert(shape); 
    }); 
}); 

: 내가를 사용하더라도 특정 사업부에서 작동하는 jQuery를 제한하는 방법이 있나요이 모든 요소에 대한 작업 이벤트 위임을 사용하는 얻으려면 두 번째 div에서 동일한 변수 이름 ". this 변수를 사용하여 클릭이 호출 된 요소에 액세스 할 수 있습니다. 이 요소에서 필요한 경우 DOM을 트래버스 할 수 있습니다 (예 : .parent()).

$('div').on('change', function(e) { 
    console.log($(this).val()); 
});