Javascript new button on form submit

Question

I'm trying to get my program to create a new button on form submit. I know I've done something wrong but don't know how to fix it. Here is my code:

$("#searches").append('<button id="recent-searches">' + textbox + '</button>')

then later on I have:

$("#recent-searches").on('submit', function() {

I think the second part of the code is where I went wrong. Any help would be awesome.

Thanks!

Answer 1

There is no submit event for a button, did you mean click or submit event on a form?

Try

$("#recent-searches").on('click', function() { // if you are biding this after appending the button.

else

$(document).on('click',"#recent-searches" function() { // if you are binding this prior to appending the button to the DOM. use $("#searches").on(... if that element is available all the time in DOM.

if #searches is a form then you would do:

$("#searches").on('submit', function(){...

Answer 2

$("#recent-searches").on('submit', function() {

This is going to bind to the element matching the id recent-searches that event. If the element doesn't exist then jQuery will do nothing. You have to bind the event to the whole document(or to a parent which will contain that element with id recent-searches ) and specify the ID, like this:

$(document).on('click', '#recent-changes', function() {

In this case I think that something like this should work:

$('#searches').on('click', '#recent-changes', function() {

Since #recent-changes is appended to that element.

Remember that the submit event is not going to be fired when you click that button, because it is not the submit button, you can use this code:

$("#searches").append('<input type="submit" id="recent-searches" value="' + textbox + '" />');

Answer 3

You're creating a button #recent-searches which will receive, among others, the event click when you click on it. However it won't fire submit events because those are just for form elements when an input element of type submit is clicked.

So you'd have a form, let's say:

<form id="searches"> ... </form>

Where you are appending the button, maybe this way:

$("#searches").append('<input type="submit" id="recent-searches">' + textbox + '</input>');

, and then you'd do:

$("#searches").on("submit", function (e) { ... });

Or you can also have your button but bind a click event instead like so:

$("#recent-searches").on("click", function (e) { ... });