Question

$(document).ready(function(){
	var nam="";
	$("#sayHello").click(function(){
		nam = $("#textBox1").val();
		if(nam == ""){
			alert("Please let know what your name is.");
		}
		else if(/  /i.test(nam)){
			alert("Try to make sure that your not adding an extra space. It can be any name make one up if that helps.");
		}
		else{
			$("#welcome").html("<p id='hi'>Hello "+ nam +",</br> How was your day?</br>" + 
			"<button id='good'>GOOD</button> <button id='okay'>okay</button>" +
			" <button id='bad'>Bad</button></p>").show();
			$("#inputBox").hide();
		}
		});	
	$("#good").click(function(){
			$("#goodHit").html("<h3>I'm so happy for you!</h3>" + 
			"<p>Here is a quote to help you along your way.</p>" + 
			"<blochquote>The good old days are now.</blochquote>" + 
			"<figcaption>Tom Clancy</figcaption>").show();
			$("#hi").hide();
		
	});
  });

<!doctype html>
<html>
	<head>
	
	<title></title>
	</head>
	
	<body>
	<div id="container">
		<div id="inputBox">
		Here is my first text box.
		
		<input id="textBox1" type="text" value=""/>
		
		<button id="sayHello">Submit</button>
		</div>
		
		<div id="welcome">
		</div>
		
		<div id="goodHit">
		</div>
    
</div>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script type="text/javascript" src="myJQ.js"></script>
	</body>

</html>

在我的第一个.click（function（）{..}）;我做了一些按钮并将它们放入div中。然后我隐藏了给我这种能力并显示按钮的div，但是当我想使用这些按钮时，没有任何事情发生。我是新手javascript和jquery请帮忙。这是我的代码。

$(document).ready(function(){
var nam="";
$("#sayHello").click(function(){
    nam = $("#textBox1").val();
    //some checks are here but unimportant

这里是按钮的制作位置并放入我的html中。

        $("#welcome").html("<p id='hi'>Hello "+ nam +",</br> How was your day?</br>" + 
        "<button id='good'>GOOD</button> <button id='okay'>okay</button>" +
        " <button id='bad'>Bad</button></p>").show();
        $("#inputBox").hide();
    }
    });

然后我尝试使用一个我想要的东西。

$("#good").click(function(){
        $("#goodHit").html("<h3>I'm so happy for you!</h3>" + 
        "<p>Here is a quote to help you along your way.</p>" + 
        "<blochquote>The good old days are now.</blochquote>" + 
        "<figcaption>Tom Clancy</figcaption>").show();
        $("#hi").hide();

});

Answer 1

当您的代码运行时，它会尝试向尚未到位的元素添加事件处理程序。将其附加到容器上。

＆＃13;

$(document).ready(function() {
  var nam = "";
  $("#sayHello").click(function() {
    nam = $("#textBox1").val();
    if (nam == "") {
      alert("Please let know what your name is.");
    } else if (/  /i.test(nam)) {
      alert("Try to make sure that your not adding an extra space. It can be any name make one up if that helps.");
    } else {
      $("#welcome").html("<p id='hi'>Hello " + nam + ",</br> How was your day?</br>" +
        "<button id='good'>GOOD</button> <button id='okay'>okay</button>" +
        " <button id='bad'>Bad</button></p>").show();
      $("#inputBox").hide();
    }
  });
$('#container').on('click',"#good",function() {
    $("#goodHit").html("<h3>I'm so happy for you!</h3>" +
      "<p>Here is a quote to help you along your way.</p>" +
      "<blockquote>The good old days are now.</blockquote>" +
      "<figcaption>Tom Clancy</figcaption>").show();
    $("#hi").hide();
  });
});

＆＃13;

<!doctype html>
<html>
<head>
  <title></title>
</head>
<body>
  <div id="container">
    <div id="inputBox">
      Here is my first text box.
      <input id="textBox1" type="text" value="" />
      <button id="sayHello">Submit</button>
    </div>
    <div id="welcome">
    </div>
    <div id="goodHit">
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="myJQ.js"></script>
</body>
</html>

＆＃13;

在函数中创建一些按钮，然后在单击它们时调用函数。 jQuery的

1 个答案: