dynamically created button not appearing

Question

I have created two buttons dynamically that will appear on button click, but the buttons aren't appearing which I believe from the research I have done is due to the the buttons trying to be added after page load. I then tried to use $('body').on('click', '.edit', edit); to add the buttons as what was explained here.

$(document).ready(function() {
  $('body').on('click', '.edit', edit);

  function edit() {

    var edit = $(this);
    var value = edit.val();
    edit.hide();
    var cancelBtn = document.createElement('button');
    cancelBtn.type = "button";
    cancelBtn.name = "Cancel";
    cancelBtn.className = "btn btn-primary cancel";
    cancelBtn.style.visibility = 'visible';

    var saveBtn = document.createElement('button');
    saveBtn.type = "submit";
    saveBtn.value = value;
    saveBtn.name = "Save Changes";
    saveBtn.className = "btn btn-primary save";
    saveBtn.formAction = '@Url.Action("Edit")';
    saveBtn.style.visibility = 'visible';


    $(".cancel").click(function cancel() {
      edit.show();
      document.getElementById("save").style.visibility = "hidden";
      document.getElementById("cancel").style.visibility = "hidden";
    });
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button type="button" class="edit">Edit</button>
<button type="button" class="cancel">Cancel</button>

Where's the lines of code that actually place the created button elements inside the page? — Shilly, Sep 19 '19 at 14:06
I made you a snippet. Please correct and add relevant HTML - I changed a pair of quotes too. Why use ID in one place and CLASS another? — mplungjan, Sep 19 '19 at 14:08
Please show where you add the class `cancel` to your button, you might also attach that event handler to parent element you actually have that you append it to when you put that code in here also. — Mark Schultheiss, Sep 19 '19 at 14:11
lacks [appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild) weird you are also mixing jQuery and DOM. — epascarello, Sep 19 '19 at 14:11
I would also suggest making a button a button if you have a choice `createElement('button');` — Mark Schultheiss, Sep 19 '19 at 14:12
I made some minor adjustments on some stuff I fixed in my code but forgot to change here such as in the cancel button not setting classname for cancel. @Shilly I guess I don't follow. These buttons that are being created on a click of button class .edit which is inside of a table so I guess I assumed it would just go there, but if my assumption was wrong then would you please explain the proper way. — Dominik Willaford, Sep 19 '19 at 14:29
`document.createElement()` only creates an element in the browser memory. It will not automatically place the element onto the page. JQuery has a different system to create new HTML elements ( `$(' — Shilly, Sep 19 '19 at 14:38
Alright thank you I'll look into and make the adjustments to my code so I'm no longer mixing the two. — Dominik Willaford, Sep 19 '19 at 14:42
Possible duplicate of [Dynamically create buttons with Jquery](https://stackoverflow.com/questions/8936652/dynamically-create-buttons-with-jquery) — Liam, Sep 19 '19 at 14:58

score -1 · Answer 1 · answered Sep 19 '19 at 14:54

What you need is to append your new element to some container.

https://www.w3schools.com/jquery/jquery_dom_add.asp

Here is my sample js code:

$(document).on('click', '.edit', function() {
    debugger;
    //It's much easier to create element by html string with jQuery
    $('.actions').append('<button id="cancel" class="btn btn-primary cancel">Cancel</button>');
    $('.actions').append('<button id="save" type="commit" class="btn btn-primary save" value="' + $(this).val() + '">Save</button>');

    $(this).hide();

});
$(document).on('click', '.save', function() {
    alert('saved');
    $(this).remove();
    $('#cancel').remove();
})

$(document).on('click', '.cancel', function() {
    $(this).remove();
    $('#save').remove();
})

Here is sample html:

<HTML>
<BODY>
    <form id="dosomething">
        <div class='actions'>
            <button type="button" class="edit" value="some value">Click Me!</button>
        </div>
    </form>
</BODY>
</HTML>

dynamically created button not appearing

1 Answers1