动态创建的网页不起作用
dynamically created webpage does not work
>我正在开发一个网页,它首先创建了许多选择表单。当用户为特定选择表单选择选项时,将根据用户的选择创建另一个子窗体,并将其附加到该选择窗体。不幸的是,我的代码不起作用,例如,(1) 未创建子窗体和 (2) 用于附加子窗体的选择器未正确编码 - 它们始终指向固定值 (#wrapper-options3)。我的原始代码更复杂,但我在下面的代码中复制了结构 + 一些简单的示例函数 - 它会导致与原始代码相同的错误。我应该如何正确编码子窗体的添加(在下面的代码的步骤 2 中)?例如,如何获得 #wrapper 选项的正确选择器值?
<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>
.change()
函数的作用域与包装它的代码不同,因为它是在事件上触发的,而不是内联的。因此,当它运行时,它不知道i
的值是什么。您需要向函数传递一个值才能获得正确的引用,否则它将始终是i
的最后一个值,因为包装代码已完成执行。
此外,您可能希望考虑使用相对选择器并取消对元素进行编号。
试试这个并查看委托以供参考。
<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>
相关文章:
- electronic BrowserWindow的最小高度和宽度在hide()show()方法之后不起作用
- 我的点击登录在网页上不起作用
- 网页按价格排序下拉菜单不起作用
- 使用 jquery 在我的网站中加载其他网页不起作用
- 当我尝试在网页中使用更新面板时,CSS不起作用
- 网页Jquery下拉按钮不起作用
- 网页中的JavaScript不起作用
- 动态创建的网页不起作用
- jQuery $this 在网页上不起作用
- 在网页上按“输入”键在镶边上不起作用
- AngularJS ng-repeat在Django驱动的网页上不起作用
- 我网页上的 JavaScript 在 IE 9 中不起作用有什么原因吗?
- 滑动在HTML5网页中不起作用
- 简单的 ajax GET 请求在我的 Django 网页上不起作用
- 尝试制作一个类似于终端外壳的网页,为什么会出现这种情况'不起作用
- jQuery转换是否可能在繁重的网页上不起作用
- Android-将值从应用程序传递到网页视图页面不起作用
- Js SIP 代码在网页上不起作用
- . getelementbyid().值在窗体's隐藏字段asp.net网页中不起作用
- 向网页中注入代码不起作用