I have a list of files on a server displayed on a page. I also have a button to create a folder. Clicking the button generates a new text input where a name for the folder can be entered, which is nested in an html form. I then want to write some ajax there however the .submit function of Jquery doesn't see the newly generated text input field, therefore I cannot get this to work. Here's my jquery:
$(document).ready(function(){
var csrf = "{% csrf_token %}";
var fields = 0;
$('#newFolder').click(function(){
var folderName = $('<form method="post" class="createFolder">' + csrf + '<li><input type="checkbox" class="styled-checkbox"><div id="name"><input type="text" id="fieldName" /></div></li></form>');
$('.objectsList').append(folderName);
});
$('.createFolder').on('submit', function(event){
event.preventDefault();
alert("fieldName");
});
});
So when you click on #newFolder
a new li with a form is generated. I enter the name for the folder and as I click enter I get redirected to the same page but blank.
If I hardcode this form with text input it works fine.
I understand that Jquery loads along with the page and if something is generated after the page has loaded then it will not see it, correct?
How can I make it 'see' this newly generated form and its fields?
Thanks