insertafter done

时间:2017-08-31 09:40:31

标签: javascript jquery html

如果我使用insertAfter() id块,则文本框无法点击!

<link href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#id").click(function() {
      $("#id").insertAfter($(".logo"));
    });
  });
</script>

<body>
  <p>This is a paragraph.</p>
  <p class="logo">This is another paragraph.</p>
  <button>Clone all p elements, and append them to the body element</button>
  <div id="id">
    <form>
      <input type="text" />
    </form>
  </div>
</body>

2 个答案:

答案 0 :(得分:0)

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var clickedOnce = false;
$(document).ready(function(){
    $("#id").click(function(){
      if(clickedOnce === false) {
        $("#id").insertAfter($(".logo"));
        clickedOnce = true;
      }
    });
});
</script>
<body>
  <p>This is a paragraph.</p>
  <p class="logo">This is another paragraph.</p>
  <button>Clone all p elements, and append them to the body element</button>
  <div id="id">
    <form>
      <input  type="text" />
    </form>
  </div>
</body>
&#13;
&#13;
&#13;

这是因为当您点击第二次或更多次时,它仍然会在#id之后插入.logo,这会使文本框出错。 您需要检查按钮是否被单击过一次。

答案 1 :(得分:0)

这是工作检查。

<link href="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
     var moved = false;
     $("#id").click(function() {
          if(!moved) {
          $("#id").insertAfter($(".logo"));
          moved = true;
           }
        });    
      });

</script>

<body>
  <p>This is a paragraph.</p>
  <p class="logo">This is another paragraph.</p>
  <button>Clone all p elements, and append them to the body element</button>
  <div id="id">
    <form>
      <input type="text"/>
    </form>
  </div>
</body>