【发布时间】：2016-02-09 15:04:35
【问题描述】：
我有一个网站应用程序http://firstusadata.com/cash_flow_test/，我想添加一些功能，但没有成功。
这个想法是能够通过单击一个按钮添加供应商信息表单，然后能够通过单击不同的按钮将产品添加到该特定供应商信息表单。下图显示了供应商信息按钮以及添加产品按钮。
Vendor and Product Button areas
目前，如果我删除供应商信息表单 (div id="dynamic_content_1") 的动态 html 功能，如下所示，添加产品按钮有效，它将在前一个产品线下方附加新产品线。我相信我的错误位于该区域的某个地方，但我不确定。
function dynamic_html(){
var content = '<div id="dynamic_content_1">'
+'<div class="row">'
+'<div class="col-sm-8 col-sm-offset-2 SecPageMain">'
+'<h3>Vendor Information</h3>'
+'<form method="post" action="http://firstusadata.com/cash_flow/companies/insert_company_information">'
+'<div class="row margin_top_25">'
+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
+'<p>Name of Company:</p>'
+'</div>'
+'<div class="col-md-6 col-sm-12">'
+'<input type="text" class="form-control pull-left w100" name="company_name" required='' >'
+'</div>'
+'</div>'
+'<div class="row margin_top_25">'
+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
+'<p>Company Phone Number:</p>'
+'</div>'
+'<div class="col-md-6 col-sm-12">'
+'<input type="text" class="form-control pull-left w100" id="" name="company_phone" required='' >'
+'</div>'
+'</div>'
+'<div class="row margin_top_25">'
+'<div class="col-md-5 col-md-offset-1 col-sm-12">'
+'<p>Did this company build your website?</p>'
+'</div>'
+'<div class="col-md-5 col-sm-12">'
+'<div class="radio radio-info radio-inline" >'
+'<input type="radio" value="1" name="built_website">'
+'<label for="inlineRadio1"> Yes </label>'
+'</div>'
+'<div class="radio radio-inline">'
+'<input type="radio" value="0" name="built_website" checked>'
+'<label for="inlineRadio2"> No </label>'
+'</div>'
+'</div>'
+'</div>'
+'<div class="hide" id="BuildWebsite" >'
+'<div class="row margin_top_10">'
+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
+'<p>Website URL:</p>'
+'</div>'
+'<div class="col-md-6 col-sm-12">'
+'<input type="text" class="form-control pull-left w100" id="website_url" name="website_url">'
+'</div>'
+'</div>'
+'<div class="row margin_top_10">'
+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
+'<p>Type of Website:</p>'
+'</div>'
+'<div class="col-md-6 col-sm-12">'
+'<select class="form-control w100" id="type_of_website" name="type_of_website">'
+'<option value="Amazon Store">Amazon Store</option>'
+'<option value="Affiliate">Affiliate</option>'
+'<option value="Drop Ship">Drop Ship</option>'
+'<option value="Lead Generation">Lead Generation</option>'
+'<option value="Small Business">Small Business</option>'
+'<option value="Landing Page">Landing Page</option>'
+'</select>'
+'</div>'
+'</div>'
+'<div class="row margin_top_10 category_area" style="display:none">'
+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
+'<p>Category:</p>'
+'</div>'
+'<div class="col-md-6 col-sm-12">'
+'<select class="form-control w100" id="website_category" name="website_category">'
+'<option value="">Select category</option>'
+'</select>'
+'</div>'
+'</div>'
+'<div class="row margin_top_10">'
+'<div class="col-md-4 col-md-offset-1 col-sm-12">'
+'<p>Average Profit Margin Per 100 Users:</p>'
+'</div>'
+'<div class="col-md-6 col-sm-12">'
+' <input type="text" class="form-control pull-left w100 price" id="average_profit" name="average_profit">'
+'</div>'
+'</div>'
+'</div>'
+'<div id="dynamic_content_2">'
+'<div class="row margin_top_25 form-inline product_row">'
+'<div class="col-sm-3 col-sm-offset-1">'
+'<div class="form-group w100">'
+'<input type="" class="form-control w100" id="" name="product_name[]" placeholder="Product" required>'
+'</div>'
+'</div>'
+'<div class="col-sm-2">'
+'<div class="form-group w100">'
+'<input type="" class="form-control w100 price" id="" name="product_price[]" placeholder="Price" required>'
+'</div>'
+'</div>'
+'<div class="col-sm-3">'
+'<select class="form-control w100" name="product_type[]" required>'
+'<option value="">Select</option>'
+'<option value="Web Development">Web Development</option>'
+'<option value="Business Development">Business Development</option>'
+'</select>'
+'</div>'
+'<div class="col-sm-3">'
+'<div class="btn-inline margin_left_25">'
+'<button type="button" class="btn plusbtn btn-default pull-left">'
+'<i class="fa fa-plus"></i>'
+'</button>'
+'<button type="button" class="btn btn-default minusbtn pull-left">'
+'<i class="fa fa-minus"></i>'
+'</button>'
+'</div>'
+'</div>'
+'</div>'
+'</div>'
+'<h4>Add Vendor</h4>'
+'<div class="col-sm-3">'
+'<div class="btn-inline margin_left_25">'
+'<button type="button" class="btn testbutton1 btn-default pull-left">'
+'<i class="fa fa-plus"></i>'
+'</button>'
+'<button type="button" class="btn btn-default testbutton2 pull-left">'
+'<i class="fa fa-minus"></i>'
+'</button>'
+'</div>'
+'</div>'
+'</form>'
+'</div>'
+'</div>'
+' </div>';
return content;
}我对 jquery 相当了解，所以对于那些更有经验的人来说，我可能会遗漏一些非常明显的东西，我非常感谢你的帮助。
【问题讨论】：
-
那么，您面临的问题是什么？
-
..它将新产品线附加到前一个产品线的下方。我相信我的错误位于该区域的某个地方，但我不确定。 什么错误？
-
我无法让“添加供应商”按钮与“添加产品”按钮一起使用。我只能让“添加产品”按钮工作，而且只有当我删除上面显示的动态 html 时。如何让这两个按钮正常工作？
-
不幸的是，我的代码太长，无法添加为注释。您可以在firstusadata.com/cash_flow_test查看页面，然后点击查看源代码访问完整代码。
-
我已将代码添加到 jsfiddle 我希望这能够帮助jsfiddle.net/uLk7p009
标签： javascript jquery html onclick dynamic-html