在Jquery独立工作div

我正在尝试创建一个独立工作的div，其中包含一个表单。

我使用jquery来计算产品的价格，具体取决于用户在表单中的选择。 但是，用户可以在他的“购物车”中添加多个项目，以便将表单复制到另一个div。 问题是计算模式不能将这两个div分开，计算结果不正确。 表单也是交互式的，因此它将由用户的输入生成。 这是非常复杂的设置，并且通过’产品编号’重命名每个变量对我来说听起来不是很有效。

我有点卡在这里，我真的不知道如何解决这个问题。 我有一个想法，如果我把一个iframe放在div里面并加载我的表单及其计算脚本，然后使用post命令将产品的价格转移到’主页’来计算总价用户想要的所有产品。

然而，似乎jQuery脚本在这些iframe中不能独立工作，它们仍然具有连接，因此它们相互破坏。

我会感谢任何建议，并帮助解决这个问题，谢谢！

这是迄今为止的代码

inheritance人身体

var productNumber = 1; 

 
 
 Add new product
 

添加新项目

  $('#newProduct').click(function () { $('
') .appendTo('#div_structure') .html('Product '+productNumber +' '+ 'Remove'); $('
').appendTo('#product'+productNumber+''); $('').appendTo('#div_product'+productNumber+''); productNumber++; }); 

它还有一个允许用户删除插入的div的function。

这里只是productform的几行

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

 
 
 
Select the shape of the product
 R1
 R2
 R3
 
 . . .  

我翻译了所有变量，因此它们可能无法正常运行，因为我没有测试翻译版本。 所以问题是，如果我尝试在第二个生成的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中运行，即使我在第二个div中使用相同的变量名称” 。 您可以使用this变量来访问调用click的元素。 如果需要，您可以从此元素遍历DOM，例如使用.parent() 。

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