在它之前爆炸后,提交<按钮>不起作用

Question

我已经查看了stackoverflow几天,并没有我工作的东西.无论如何,在爆炸并向我的文档附加提交按钮后,按钮在单击时不会发出警报.

    $(document).ready(function() {
      alert('hi');
      $("#a").click(function() {
        $(".main, .topbar, button").toggle("explode");
        $('body').delay(8100).append("<img src='picture.png'> <form >  <input            type='text'></form><button id='submit'>submit</button>");
      });
      $("#submit").click(function() {
        alert('hi');

      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='a'>button</button>

有什么建议？

Answer 1

要绑定click到提交之前提交甚至加入htmlDOM.要这样做,您必须先将提交添加到htmlDOM,然后绑定事件处理程序.

但是,对于这样的动态元素,您可以使用jQuery on函数并从任何父元素委托.不建议委派body,您可以从document.ready事件期间出现的最近父母委派.

$(document).ready(function() {
      alert('hi');
      $("#a").click(function() {
        $(".main, .topbar, button").toggle("explode");
        $('body').delay(8100).append("<img src='picture.png'> <form >  <input            type='text'></form><button id='submit'>submit</button>");
      });
      $("body").on('click','#submit',function() {
        alert('hi');

      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='a'>button</button>