Javascript 动态创建的网页不起作用
我正在开发一个网页，首先创建一些精选表格。当用户为特定的选择表单选择选项时，将根据用户的选择创建另一个子表单，并附加到该选择表单。不幸的是，我的代码不起作用，例如，（1）未创建子表单，（2）用于附加子表单的选择器未正确编码-它们始终指向固定值（#wrapper-options3）。我的原始代码更复杂，但我复制了下面代码中的结构+一些简单的示例函数-它会导致与原始代码相同的错误。我应该如何正确编写添加子窗体的代码（在下面代码的步骤2中）？例如，如何为#包装器选项获取正确的选择器值Javascript 动态创建的网页不起作用,javascript,jquery,Javascript,Jquery,我正在开发一个网页，首先创建一些精选表格。当用户为特定的选择表单选择选项时，将根据用户的选择创建另一个子表单，并附加到该选择表单。不幸的是，我的代码不起作用，例如，（1）未创建子表单，（2）用于附加子表单的选择器未正确编码-它们始终指向固定值（#wrapper-options3）。我的原始代码更复杂，但我复制了下面代码中的结构+一些简单的示例函数-它会导致与原始代码相同的错误。我应该如何正确编写添加子窗体的代码（在下面代码的步骤2中）？例如，如何为#包装器选项获取正确的选择器值 <
<script>
$(document).ready(function(){
var previous;
//functions
var Buildform = function(i){
var form;
form = '<select class="eprodtype'+i+'" name="transport'+i+'">';
form += '<option value="bike"> Bike'+i+' </option>';
form += '<option value="car"> Car'+i+' </option>';
form += '</select>';
form += '<div id="wrapper-options'+i+'"> "wrapper-options'+i+'" </div>';
return $(form);
}//Buildform
var Buildsubform = function(i){ //i will contain <select> value
var subform = '<p> '+i+' </p>';
console.log('Buildsubform():'+subform);
return $(subform);
}
//step 1: build 'base' form with multiple select forms
for(var i=0;i<3;i++){
var form = Buildform(i);
$('#wrapper').append(form);
}
//step 2: build subform depending on choice user within base form
for(var i=0;i<3;i++){
$(".eprodtype"+i).focus(function () {
// Store the current value on focus and on change
var previous = this.value; //old select value
}).change(function() {
var subform = Buildsubform(this.value);
console.log('append subform'+subform);
//ERROR IN THE NEXT 2 LINES; selector '#wrapper-options'+i always has a value #wrapper-options3 - instead of a dynamic value
$('#wrapper-options'+i).html(''); //remove previous subform
$('#wrapper-options'+i).html(subform);
var str = '#wrapper-options'+i;
console.log('wrapper-options val: '+str);
console.log('change eprod val: '+this.value);
previous = this.value;
});
}//for i
}); //$(document).ready
</script>
</head>
<body>
<form>
<div id="wrapper"></div> <!--wrapper for function Buildform() -->
</form>
</body>
$（文档）.ready（函数（）{
var-previous；
//功能
var Buildform=函数（i）{
var形式；
形式=''；
表格+=‘自行车’+i+“”；
表格+=‘汽车’+i+“”；
形式+=''；
格式+='“包装选项”+i+''；
返回元（表格）；
}//建筑形式
var Buildsubform=函数（i）{//i将包含值
变量子形式=''+i+''；
log（'Buildsubform（）：'+子窗体）；
返回$（子窗体）；
}
//步骤1：使用多个选择表单构建“基本”表单
对于（var i=0；i
.change（）
函数的作用域与包装它的代码的作用域不同，因为它是在事件上触发的，而不是内联的。因此，当它运行时，它不知道值i
是什么。您需要向函数传递一个值以获得正确的引用，否则它将始终是包装代码完成执行后的最后一个值i
ng
此外，您可能还想看看如何使用相对选择器，以及如何取消对元素进行编号。试试这个，并查看以供参考
<script>
$(document).ready(function(){
var previous;
//functions
var Buildform = function(i){
var form;
form = '<form><select class="eprodtype'+i+'" name="transport'+i+'">';
form += '<option value="bike"> Bike'+i+' </option>';
form += '<option value="car"> Car'+i+' </option>';
form += '</select>';
form += '<div id="wrapper-options'+i+'"> "wrapper-options'+i+'" </div></form>';
return form;
}//Buildform
var Buildsubform = function(i){ //i will contain <select> value
var subform = '<p> '+i+' </p>';
console.log('Buildsubform():'+subform);
return subform;
}
//step 1: build 'base' form with multiple select forms
for(var i=0;i<3;i++){
var form = Buildform(i);
$('#wrapper').append(form);
}
//step 2: build subform depending on choice user within base form
for(var i=0;i<3;i++){
$('body').on('focus', ".eprodtype"+i, function () {
// Store the current value on focus and on change
var previous = this.value; //old select value
}).on('change', ".eprodtype"+i, function() {
var subform = Buildsubform(this.value);
console.log('append subform'+subform);
//ERROR IN THE NEXT 2 LINES; selector '#wrapper-options'+i always has a value #wrapper-options3 - instead of a dynamic value
$('#wrapper-options'+i).html(''); //remove previous subform
$('#wrapper-options'+i).html(subform);
var str = '#wrapper-options'+i;
console.log('wrapper-options val: '+str);
console.log('change eprod val: '+this.value);
previous = this.value;
});
}//for i
}); //$(document).ready
</script>
</head>
<body>
<form>
<div id="wrapper"></div> <!--wrapper for function Buildform() -->
</form>
</body>
$（文档）.ready（函数（）{
var-previous；
//功能
var Buildform=函数（i）{
var形式；
形式=''；
表格+=‘自行车’+i+“”；
表格+=‘汽车’+i+“”；
形式+=''；
格式+='“包装选项”+i+''；
申报表；
}//建筑形式
var Buildsubform=函数（i）{//i将包含值
变量子形式=''+i+''；
log（'Buildsubform（）：'+子窗体）；
返回子窗体；
}
//步骤1：使用多个选择表单构建“基本”表单
对于（var i=0；i
你的标签在哪里？你能考虑使用小写字母的函数名吗？这是我的眼睛：（你是对的，一个formtag丢失了；只是更新了下面的代码，但这并不能解决问题。我已经怀疑你说的是什么，但我的问题是：如何获得正确的参考值，给出我的设计目标？这正是我努力解决的问题…thnx。但是，用你的代码（更正）如果不知道你要实现什么目标，它仍然不起作用，我很难让它像你期望的那样起作用。我只是想给你一些前进的方向。因为你的表单元素都是动态的，简单地将焦点和更改绑定到那些元素是不起作用的。对不起，我之前的反应可能听起来有点生硬非常感谢您的建议（！）。我想实现的是创建一个子表单（使用Buildsubform（）为每个dropdownlist创建并附加到此列表。dropdownlist是动态创建的（使用Buildform（））因为dropdownlists的数量可能会有所不同。子表单会根据dropdownlists中的选择而有所不同。请不要误会。我对您的评论一点也不不满，我知道我的代码没有带来您想要的内容（我比较了两个版本的控制台结果，没有任何更改）。我的代码的一个明显错误是，.on（）中的“this.value”回调将不起作用，因为此处正在使用委托方法。请查阅jquery.on和.delegate的手册，我相信您可以找到所需内容。祝您好运：）