Javascript 动态创建的元素上的事件绑定问题

我有一些代码在JSFIDLE上以一种方式运行，在localhost上以一种方式运行，在上传到我的网站时以另一种方式运行。我已经为这个问题苦思冥想了几天了。我不知道在这一点上我可以运行哪些测试或尝试和错误

这个JSFIDLE正按照我希望的方式工作

当我将此代码插入到我的项目中，并使用WAMP在localhost上运行它时，页面的javascript无法工作。javascript在通过jslint运行时有效

更奇怪的是，当我将完全相同的文件上传到我的网站时，javascript是功能性的，我甚至可以单击watch按钮并呈现表单，但nevermind按钮不会将我返回到原始状态。我的电脑没有收到任何错误

当我替换

$(document).on('click', '.nevermind', function() {
    $('#imagebox').html(imagebox);
});

与

localhost的功能与网站功能相同，具有正常运行的javascript，但没有正常运行的nevermind按钮

下面是代码，但让我告诉你更多关于页面其余部分的信息，以防相关。我正在使用php。它是一个.php文件，bootstrap被加载并工作，jquery被加载，javascript在页面底部运行，而不是在页眉。页面的其他地方运行着ajax，可以在网站上运行，但不能在本地主机上运行，我为每个页面都提供了正确的connect.php文件。我最好的猜测是ajax与此有关

问题是什么，或者我可以运行哪些测试

这是HTML

<div id="inputbox">
<form><button type="button" id="watchcontrol" class="btn btn-default">Watch</button>
</form>
<br>
</div>

                                <!-- images and continued input extension-->
        <!-- imagebox also acts as control panel -->
<div id="imagebox">
ORIGINAL STATE
</div>

看


原始状态

下面是javascript

var imagebox = 'ORIGINAL STATE';

var watchform =  '<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 nevermind">nevermind</button>';

$(document).ready(function(){
                                    //control functionality
$(document).on('click', '.nevermind', function() {
    $('#imagebox').html(imagebox);
});

$('#watchcontrol').click(function(){
    $('#imagebox').html(watchform);
});
});

var-imagebox='原始状态'；
var watchform=''+
“
”+
'' + 
'' + 
“

无所谓”；
$（文档）.ready（函数（）{
//控制功能
$（文档）.on（'click'，'nevermind'，function（）{
$（'#imagebox'）.html（imagebox）；
});
$（'#watchcontrol'）。单击（函数（）{
$（'#imagebox'）.html（watchform）；
});
});

---

这个问题虽然有帮助，但并没有解决我的问题。我相信我的问题与此不同。

以下仅将事件处理程序绑定到现有DOM元素：

$('.nevermind').click(function(){
    $('#imagebox').html(imagebox);
});

其中不包括单击

#watchcontrol

后附加的内容

但是，下面的方法可以工作，每次创建动态元素时都会绑定事件（尽管我建议您在从DOM中删除元素之前释放该元素）：

---

您的控制台中是否有任何错误？当我看到这个答案时，我很兴奋，因为代码看起来很可靠，但不幸的是，它没有解决问题。页面行为完全相同。另外，我不会使用你发布的第一批代码。这只是另一种选择，因为一些奇怪的，也许相关的原因，使得本地主机更接近正常运行。很抱歉，我没有仔细阅读您的问题。你在加载页面时有没有检查过你的控制台？我不想这么说，但是我如何用WAMP或我的webhosts cPanel检查我的控制台呢？此外，代码似乎出于某种原因破坏了javascript。当我插入ajax时，它停止工作。代码仍然有效。啊哈！我知道了。您发现代码缺少一个}）；最后，我还是会给你一个正确的答案，因为我已经为此挣扎了很长时间，我问了很多人。这是一个阻碍项目进展的路障。非常感谢你！

$('.nevermind').click(function(){
    $('#imagebox').html(imagebox);
});

$('#watchcontrol').click(function(){
    $('#imagebox').html(watchform);
    $('.nevermind').click(function(){
      $('#imagebox').html(imagebox);
    });
});