通过将按钮事件放在nivo图像滑块中的图像上，按钮事件无法正常工作

Question

我正在使用jquery nivo滑块插件。 Nivo slider。在提供的演示中有html标题（沿着html标题的单个图像）。我尝试添加一个按钮而不是html标题。通过单击按钮，将触发一些事件。已经使用这种方式放置了图像的html标题

<div id="slider" class="nivoSlider">
<img src="{{media url=" wysiwyg/toystory.jpg "}}" alt="" />
<a href="#">
    <img title="This is an example of a caption " src="{{media url=" wysiwyg/up.jpg "}}" alt="" />
</a>
<img src="{{media url=" wysiwyg/walle.jpg "}}" alt="" data-transition="slideInLeft" />
<img title="htmlcaption" src="{{media url=" wysiwyg/nemo.jpg "}}" alt="" />

我尝试放在div中，但在前端看不到。所以我试着把它放在图像标签的title属性下面。这将显示前端页面中的按钮。以下html为图像添加一个按钮。

<img title="<button id='adbtn'>hello</button>" src="{{media url=" wysiwyg/walle.jpg "}}" alt="" />

此图像标记位于具有id滑块的div中。我可以在前端查看按钮。使用jquery提供给按钮的id的单击事件不起作用。它在控制台中显示 undefined 。我在header.phtml文件中添加了以下Jquery代码

jQuery('#adbtn').click(function(){alert('hello btn');});

其实我在magento中使用这个插件来拥有主页滑块。对滑块实现按钮操作的任何其他方法也有助于克服此问题。建议我一些想法将真正有助于解决这个问题。提前谢谢。