jQuery append div on click

Question

So I'm making this thing in jQuery where if the user clicks a button a div appears and asks the user to enter some notes(basically a sticky note feature).

The HTML and CSS are done correctly, the only problem is that the jQuery won't work:

    $(document).ready(function() {
    $("#top-tabs ul li").hover(function() {
        $(this).find("ul>li").stop().fadeToggle(400);
    });

    $("#submitpnote").on("click", function() {
        $("body").append("<div id='pnoteprompt'><input id ='input-pnote'type='text' placeholder='your note title'></input><input id ='input-pnote-p'type='text' placeholder='your note'></input><button id=confirmpnote>confirm note</button></div>");
        $("#pnote-prompt").fadeTo(100, 1);

    });

    $("#confirmpnote").on("click", function() {
        var $pnotetitle = document.getElementById("input-pnote").value;
        var $pnotep = document.getElementById("input-pnote-p").value;
        $("#pnotes-list").append("<div class='pnote-title'><li>" + $pnotetitle + "<br>" + $pnotep + "</li></div>");
        $("#pnoteprompt").remove();
    });

});

The js jQuery file is linked properly. It's just that in the submitpnote function(the second on), the div doesn't append. I click the button and nothing appears on my screen. I've tried putting some prompt() debuggers and the method is running but the div doesn't seem to be appending.

Does anyone know why this is happening? Thanks!

Have you tried replacing " " with ' '? $("body").append('<div id="pnoteprompt"><input id="input-pnote" type="text" placeholder="your note title"></input><input id="input-pnote-p" type="text" placeholder="your note"></input><button id="confirmpnote">confirm note</button></div>'); Html attributes have to have double quotes, not single ones. — Davion
– Davion, Commented Mar 15, 2015 at 13:49

Kevin Grabher · Accepted Answer · 2015-03-15 13:52:07Z

1

As I see it confirmpnote is dynamically created content, so you can't do $(#confirmnote) since that won't exist at the point that code is executed.

For dynamically created content use:

(document).on('click', 'selector', function(){
 //to stuff
});

selector would be #confirmpnote for example

answered Mar 15, 2015 at 13:52

Kevin Grabher

3991 gold badge4 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dhiraj · Accepted Answer · 2015-03-15 13:52:53Z

0

Looks like you are adding the container that has submitpnote button dynamically so you would have to add the even handler using .on()

$('body').on('click', '#submitpnote', function(e){
  $(e.delegateTarget).append("<div id='pnoteprompt'><input id ='input-pnote'type='text' placeholder='your note title'></input><input id ='input-pnote-p'type='text' placeholder='your note'></input><button id=confirmpnote>confirm note</button></div>");
  $("#pnote-prompt").fadeTo(100, 1);
});

answered Mar 15, 2015 at 13:52

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

Collectives™ on Stack Overflow

jQuery append div on click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related