我尝试使用javascript和jQuery动态创建表单。该表单有一些jQuery动画,这些动画由复选框输入元素的点击触发。
这是页面加载后的一些页面HTML(在创建任何动态元素之前):
<td id="escalationTimeout">
<div>
<div class="div-formContainer" style="width: 195px;">
<label title="tooltip text">
<input type="checkbox" style="position: relative; top: 2px;" onclick="cbtoggle(this); slideUpDown(this);"> checkbox text
</label>
</div>
<div class="div-inline-block" style="display: none;">
<input type="text" size="3" name="value1" id="value1" value="" style="background-color: AliceBlue;"> minutes
</div>
<div style="display: none;">
<!-- some other stuff here, not so important for this question -->
</div>
</div>
</td>
以下是上述代码中引用的两个JS函数:
function cbtoggle(obj) {
if ( jQuery(obj).is(':checked') ) {
jQuery(obj).parent().parent().next().fadeIn(300);
} else {
jQuery(obj).parent().parent().next().fadeOut(300);
}
}
function slideUpDown(obj) {
jQuery(obj).attr("disabled", true);
if ( jQuery(obj).is(':checked') ) {
jQuery(obj).parent().parent().next().next().slideDown(300,function() { jQuery(obj).removeAttr("disabled"); } );
} else {
jQuery(obj).parent().parent().next().next().slideUp(300,function() { jQuery(obj).removeAttr("disabled"); } );
}
}
对于第一个代码块中的静态部分,当单击该复选框时,div淡入并且其下的另一个div滑入视图。我使用jQuery函数来完成这项工作。对于静态创建的术语,它完全按预期工作。如果需要进一步解释,请告诉我。
我想要做的是在运行时通过JS复制此部分,以便用户可以有更多这样的部分,如果他们想要填写。请参阅下面的代码,该代码会创建此部分的副本并将其附加到父div(id =&#34; escalationTimeout&#34;):
// This is where we will insert this whole thing when it's done being created
var appendToElement = document.getElementById("escalationTimeout");
// Create the master div wrapper for this new section
var newTopElement = document.createElement("DIV");
// Create the checkbox
var newChildElement = document.createElement("INPUT");
newChildElement.type = "checkbox";
jQuery(newChildElement).css("position", "relative");
jQuery(newChildElement).css("top", "2px");
newChildElement.onClick = function() {
cbtoggle(this);
slideUpDown(this);
};
// Create the label for the checkbox
var newElement = document.createElement("LABEL");
jQuery(newElement).attr("title", "tooltip text");
// Append the checkbox and the text node to the label tags
newElement.appendChild(newChildElement);
newChildElement = document.createTextNode(" checkbox text");
newElement.appendChild(newChildElement);
newChildElement = newElement;
// Create the div wrapper for the label and its checkbox
newElement = document.createElement("DIV");
jQuery(newElement).addClass("div-formContainer");
jQuery(newElement).css("width", "195px");
// Append the label into the div wrapper
newElement.appendChild(newChildElement);
// Append the div wrapper into the master div wrapper
newTopElement.appendChild(newElement);
// Create the fade in-out section
newChildElement = document.createElement("INPUT");
newChildElement.type = "text";
newChildElement.size = "3";
jQuery(newChildElement).css("backgroundColor", "AliceBlue");
// Create the div wrapper for this text input box
newElement = document.createElement("DIV");
jQuery(newElement).addClass("div-inline-block");
jQuery(newElement).css("display", "none");
// Append into the div wrapper
newElement.appendChild(newChildElement);
newChildElement = document.createTextNode(" minutes");
newElement.appendChild(newChildElement);
// Append the div wrapper into the master div wrapper
newTopElement.appendChild(newElement);
// Create the slide up/down section
newElement = document.createElement("DIV");
jQuery(newElement).css("display", "none");
newChildElement = document.createTextNode("Some other stuff here");
newElement.appendChild(newChildElement);
// Append into the master div wrapper for this new section
newTopElement.appendChild(newElement);
// Finally, append into the existing div
appendToElement.appendChild(newTopElement);
如果我运行上面的代码,则会生成以下HTML块:
<div>
<div class="div-formContainer" style="width: 195px;">
<label title="tooltip text">
<input type="checkbox" style="position: relative; top: 2px;"> checkbox text
</label>
</div>
<div class="div-inline-block" style="display: none;">
<input type="text" size="3" style="background-color: rgb(240, 248, 255);"> minutes
</div>
<div style="display: none;">
Some other stuff here
</div>
</div>
它在第一个输入标记(复选框)中不包含onclick="cbtoggle(this); slideUpDown(this);"
,正如我所期望的那样,单击该复选框无效。
本节特别不起作用:
newChildElement.onClick = function() {
cbtoggle(this);
slideUpDown(this);
};
我也试过这个而不是上面但不仅它不起作用,它还禁用了复选框:
newChildElement.addEventListener("click", cbtoggle(newChildElement));
newChildElement.addEventListener("click", slideUpDown(newChildElement));
谁能解释我哪里出错了?提前谢谢。
答案 0 :(得分:1)
试试这个:
newChildElement.addEventListener("click", function(){
cbtoggle(this);
slideUpDown(this);
});
addEventListener
的回调函数不仅仅是您要抛出的任何函数,它是使用Event
作为参数的特定类型。在这里,您不需要参数,但有时使用它会很方便。例如,你可以看到类似的东西:
formElement.addEventListener('submit', function(e){
// Prevent the normal behavious of submitting the form (aka loading the action target page)
e.preventDefault();
});