Javascript / JQuery“onclick”不起作用答案

【问题标题】：Javascript / JQuery "onclick" not workingJavascript / JQuery“onclick”不起作用
【发布时间】：2015-10-12 05:23:22
【问题描述】：

为什么这不起作用？我想不通。

如果重要的话，HTML 是使用 jQuery 的 .append() 方法注入到 div 中的。

谢谢！

$(document).ready( function() {
  $("#changeInfo").on("click", function() {
    $("#changeInfo").replaceWith('<div id=changeInfo"><div id="changeInfoTrue">Changing login information: </div>'); 
    $("#changeInfoTrue").append('<br><b>Username: <input type="text" name="newUsername" onkeypress = "checkLength()" id="newUsername" /><br> Password:&nbsp; <input type="password" name="newPassword" id="newPassword" onkeypress = "checkLength()" /></b>&nbsp;<input type="button" onclick="buttonPress();" value="Go!" id="goButton" /></div>'); 
  }); 
  function buttonPress() { 
    $("#changeInfo").replaceWith('Your login information has been reset.');
  }
});

【问题讨论】：

缺少) 的replaceWith。除此之外，如果问题仍然存在，请检查元素 $("#changeInfo") 是否存在。
修复了，还是不行。 changeInfo 绝对存在...
在 buttonPress() 函数中使用 alert 进行调试。
请显示changeInfo元素。
buttonPress是ready回调的私有函数，不能从外部访问（包括HTML onclick），将函数移到ready回调之外

标签： javascript jquery html

【解决方案1】：

添加 Jquery Libery

jQuery 函数

    $(document).ready( function() {
  $("#changeInfo").on("click", function() {
    $("#changeInfo").replaceWith('<div id=changeInfo"><div id="changeInfoTrue">Changing login information: </div>'); 
    $("#changeInfoTrue").append('<br><b>Username: <input type="text" name="newUsername" onkeypress = "checkLength()" id="newUsername" /><br> Password:&nbsp; <input type="password" name="newPassword" id="newPassword" onkeypress = "checkLength()" /></b>&nbsp;<input type="button" onclick="buttonPress();" value="Go!" id="goButton" /></div>'); 
  }); 
  function buttonPress() { 
    $("#changeInfo").replaceWith('Your login information has been reset.');
  }
});

HTML 代码

<div class="" id="changeInfo">Click here</div

演示链接：https://jsfiddle.net/tw79mvau/1/

【讨论】：