submit

Question

I've looked through stackoverflow for days, and none of the stuff I worked. Anyways, after an explosion and appending a submit button to my document the button doesn't alert when clicked.

    $(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>

Any suggestions?

you event is created before the submit button is available. Create a callback for that and it will work. — Johan, Mar 18 '16 at 16:04
You could also try it like the solution of this question: http://stackoverflow.com/questions/7707074/creating-dynamic-button-with-click-event-in-javascript — alexander-fire, Mar 18 '16 at 16:05

sabithpocker · Accepted Answer · 2016-12-08T08:23:31.010

You are binding click to submit before submit is even added to htmlDOM. To do it that way you have to first add submit to htmlDOM and then bind the event handler.

But, for such dynamic elements you can use jQuery on function and delegate from any parent element. It is not recommended to delegate from body, you can delegate from nearest parent that is present during document.ready event.

$(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>

score 0 · Answer 2 · answered Mar 18 '16 at 16:03

I'm not 100% if I understood what you're trying to do there but check if this works:

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

            });
        });
    </script>

score 0 · Answer 3 · edited Mar 27 '16 at 09:13

I assume you are inserting the button after page load, but calling the click handler before the element is on the page. Therefore jQuery can't find your element.

If you want to assign your click handler on page load, that's fine. Just assign your click handler to any parent element that is on the page when the page loads, like <body> and then using the jQuery .on() method to specify a descendant selector like so :

$('body').on('click', '#submit', function(){ alert('hi'); });

submit doesn't work after an explode before it

3 Answers3

submit