jquery not adding button

Question

Im tying to add a button when its clicked, and the new button to alert something when that is clicked, but at the moment its not alerting the message for when the new button is clicked

So what am i doing wrong with this.

here is what i have so far

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#first').bind('click', addbtn);
        $('#second').on('click', alert);

        function addbtn(){
            $('.box').html('<input type="submit" value="Click me" id="second" />');
        }
        function alert(){
            alert("works");
        }
    });
    </script>
</head>
<body>
    <input type="submit" value="Click me" id="first" />
    <div class="box"></div>
</body>
</html>

You are creating the element on the fly and event is not bound to the element that is going to be added in the future in your case, so you can use event delegation.. $('.box').on('click','#second', alert); or bind the event after adding the element. — PSL
– PSL, Commented Nov 12, 2013 at 22:29
possible duplicate of Event binding on dynamically created elements? — PSL
– PSL, Commented Nov 12, 2013 at 22:30
Just to add to @PSL's comment, use the following format as a rough guide: $(parent).on(event, element, callback); — ninty9notout
– ninty9notout, Commented Nov 12, 2013 at 22:32

Nico · Accepted Answer · 2013-11-12 22:33:38Z

In your example you are binding your event handler to "second" before it exists. Therefore there is nothing to bind to.

Now because you are using jquery 10+ the live events dont work so you must use the on event handler. Now the ON event handler attaches to an object and provides a selector option. In this case you would like to trigger and event on click for the selector #second. If I lost you more details are here. http://api.jquery.com/on/

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#first').bind('click', addbtn);

        $('.box').on('click', '#second', function(){
            alert('works');
        })

        function addbtn(){
            $('.box').html('<input type="submit" value="Click me" id="second" />');
        }

    });
    </script>
</head>
<body>
    <input type="submit" value="Click me" id="first" />
    <div class="box"></div>
</body>
</html>

Now another problem is you defined a function alert() that calls the built in function alert(). Well as you have defined the function you have essentially overridden the function and leads to infinite recursion. Avoid overriding the browser methods unless you absolutely need to.

Cheers.

Collectives™ on Stack Overflow

jquery not adding button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related