Francis Francis - 3 months ago 19
CSS Question

trying to submit a form embedded in a javascript through a click function on the div using jquery

I am trying to submit a form embedded in a javascript using a click function attached to the enclosing div. I have set the button type to display none using in-line style sheet but on tapping on the form which I set a border around it, nothing happens. This is my attempt:

this is the javascript code with the form embedded inside of it

function fetchAllActiveUsers() {
xhr.onload = function (response) {
try {
if (xhr.status === 200) {
var users = '';
for (var i = 0; i < json.length; i++) {

users += '<div class="containers"><form method="post" action="/search" style="width:220px; border:1px solid black;"><div class="form-group"><span style="display:inline; font-size:13px;"><strong>' + json[i].email + '</strong></span><input style="display:inline; width:70%" type="hidden" class="form-control" value="'+json[i].email+'" name="search" id="search" readonly> <input class="row-fluid" type="hidden" value="'+sessionVar+'" name="email" id="email" readonly/> <button style="width:31%; font-size:10px; padding:2px; display:none;" type="submit" class="btn btn-success pull-right">Play</button></div></form>'+ json[i].complaints +'</div><hr style="margin:1px; padding:0">';


active_users.innerHTML = users;
} else {
alert('Request failed. Returned status of ' + xhr.status);
} catch (e) {

this is the jquery code

$(".containers").click(function() {

my challenge is on tapping the div let it submit the form but its not working.

Kindly assist


First you can not bind events to elements that do not exist yet. Second, closest looks at ancestors, not descendants.

So you need to use event delegation and find()

$(document).on("click", ".containers", function() {