Javascript动态创建带有事件的元素

Question

我试图用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="escalationTimeout"):

// 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));

谁能解释我哪里错了?

Answer 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();
});