Question

 $('.smileys img').click(function () {
            alert("hello");

        });


<div class="smileys">
<img src="images/smileys/mad.gif"/>
</div>

.smileys css是display：none;

按钮显示表情符号：$（“。smileys”）。css（'display'，'block'）;

现在，在使.smileys可见后，第一个功能不起作用。但是，当默认情况下可以看到表情符号时，它确实有效。

Answer 1

您可能需要事件委派 -

$(document).on('click','.smileys img',function () {
            alert("hello");
});

Answer 2

您应该使用.on('click', function() {....

Answer 3

尝试使用.on()方法：

$('.smileys img').on("click", function () {
  // code 
});

或.delegate()方法：

$("body").delegate(".smileys img", "click", function() {
  // code
});

此外，为了揭示表情符号，您可以使用.show()方法。

Answer 4

您需要将事件处理程序绑定到绑定时存在于DOM中的元素。

如果您将脚本调用为：

<script>
    $('.smileys img').click(function () {
        alert("hello");
    });
</script>
<div class="smileys">
    <img src="images/smileys/mad.gif"/>
</div>

然后，您需要将事件委托给存在的内容，例如window，document或body：

$('body').on('click', '.smileys img', function () {...});

或者，您可以等到文档准备就绪，然后再绑定事件：

<script>
    jQuery(function ($) { //aliasing shortcut for $(document).ready...
        $('.smileys img').click(function () {
            alert("hello");
        });
    });
</script>
<div class="smileys">
    <img src="images/smileys/mad.gif"/>
</div>

Document.ready导致在构建页面的所有内容之后但在图像和其他外部内容完成加载之前执行该功能。

或者，您可以在元素在DOM中创建之后放置<script> ：

<div class="smileys"> <img src="images/smileys/mad.gif"/> </div> <script> $('.smileys img').click(function () { alert("hello"); }); </script>

删除display：none后，jquery函数不起作用;

4 个答案: