UPDATE: Here is a jsfiddle that better exhibits my problem. Several attempted solutions are at the bottom of the post.
Now I know I should know how to do this, but this simple .click() then .html() event is not working. It's part of something slightly more complicated, but I don't see how any of that could be preventing this from working.
The functionality is a control panel that takes over the image displaying div when it needs more room to display input forms. I hope that makes sense. I've tried putting the event other places in the code, changing classes to IDs, and lots of little things I was pretty sure wouldn't fix the problem. It might be something simple, I hope it is. Here is what is hopefully the relevant code.
HTML
<?php session_start(); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- load up bootstrap -->
</head>
<?php
//prompt for username before creating page
include 'login.php';
if(!isset($_SESSION['name'])){
loginForm();
}
else {
//begin page content
//don't know if the fact this is all inside of php brackets is relevant. Might be.
?>
<!-- lots of stuff I don't think is relevant. -->
<!-- controls and input display-->
<!-- controls and input display-->
<div id="inputbox">
<form>
<button type="button" id="talkcontrol" class="btn btn-default">Talk</button>
<button type="button" id="shoutcontrol" class="btn btn-default">Shout</button>
<button type="button" id="watchcontrol" class="btn btn-default">Watch</button>
<button type="button" id="showcontrol" class="btn btn-default">Show</button>
<button type="button" id="sharecontrol" class="btn btn-default">Share</button>
<button type="button" id="leavecontrol" class="btn btn-default">Leave</button>
</form>
<br>
</div>
<!-- images and continued input extension-->
<!-- imagebox also acts as control panel -->
<div id="imagebox">
<img width="8%" src="banners/previous.gif">
<img src="images/smokingman.jpg" width="80%" height="80%" class="img-rounded">
<img width="8%" src="banners/next.gif">
</div>
And here is the javascript and jquery, which I suspect is where the problem lay.
var imagebox = '<img width="8%" src="banners/previous.gif">' +
'<img src="images/smokingman.jpg" width="80%" height="80%" class="img-rounded">' +
'<img width="8%" src="banners/next.gif">';
var watchform = '<img src="/venue/banners/videoid.jpg" class="img-responsive" alt="Responsive image"><br>' +
'<form action="post/watchpost.php" method="post">' +
'<input type="text" name="watchid" /><br>' +
'<input type="submit" class="btn btn-default" value="Contribute" />' +
'</form>' +
'<br><br><button type="button" class="btn btn-default" class="nevermind">nevermind</button>';
$(document).ready(function(){
//control functionality
$('.nevermind').click(function(){
$('#imagebox').html(imagebox);
});
$('#watchcontrol').click(function(){
$('#imagebox').html(watchform);
});
});
UPDATE: I did as HoangHieu suggested below, this did not work.
$('.nevermind').innerHTML();
$('.nevermind').on("click",function(){
$('#imagebox').html(imagebox);
});
Also, the duplicate I was marked as is not helping, but I'll keep reading it and try to apply it to my code.
UPDATE: I kept reading, and I just don't see it. It seems to be a question about .hover and a loop. Is there something I'm missing?
UPDATE: I tried as Antti Haapala suggested below, and it did not work either.
$(document).on('click', '.nevermind', function() {
$('#imagebox').html(imagebox);
});
Both Antti and Hoang's suggestions break my javascript, and yet jslint says the code is valid. I'll keep using trial and error.
