Jquery隐藏并显示不按预期工作

Question

这段代码怎么了？

  $(document).ready(function() {
    $("#two").hide();

    $("li").click(function(){
      $("#one").hide();
      $("#two").show();
    });
    $("button").click(function(){
      $("#one").show();
      $("#two").hide();
    });	
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <div id="one">
      <h2>change password</h2>
    </div>
    <div id="two">
      <h2>input text box</h2>
      <div>
        <button>Cancel</button>	
      </div>	
    </div>		
  </li>
</ul>

对于上述标记，当我单击$("li")时，代码工作正常。但是当我单击按钮时，代码不起作用。

但如果我将$("li")替换为$("one"），则代码完全有效。不知道发生了什么。

Answer 1

您需要使用event.stopPropagation()，因为当调用按钮单击处理程序时，事件是气泡到li，因此li单击处理程序也会执行。

  

阻止事件冒泡DOM树，防止任何父处理程序收到事件通知。

代码的

$("button").click(function(event){

    event.stopPropagation();

    $("#one").show();
    $("#two").hide();
}); 

＆＃13;

＆＃13;

$(document).ready(function() {

	  $("#two").hide();

	  $("li").click(function() {
	    $("#one").hide();
	    $("#two").show();
	  });
	  $("button").click(function(event) {

	    event.stopPropagation();

	    $("#one").show();
	    $("#two").hide();
	  });
	});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div id="one">
      <h2>change password</h2>
    </div>
    <div id="two">
      <h2>input text box</h2>
      <div>
        <button>Cancel</button>
      </div>
    </div>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;