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