点击图片后无法执行任何事件？

Question

This is my code which is getting dynamically appended by a plugin

<div class="emoji-menu" style="top: 913px; left: 1211.5px; display: block;">
  <div class="emoji-items-wrap1">
    <div class="emoji-items-wrap nano mobile_scrollable_wrap has-scrollbar">
      <div class="emoji-items nano-content" tabindex="-1" style="right: -17px;">                
        <a href="javascript:void(0)" title=":unamused:">
          <img src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -360px 0px no-repeat;background-size:540px 140px;" alt=":unamused:">
          <span class="label">:unamused:</span>
        </a>
        <a href="javascript:void(0)" title=":joy:">
          <img src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -440px 0px no-repeat;background-size:540px 140px;" alt=":joy:">
          <span class="label">:joy:</span>
        </a>
      </div>
    </div>
  </div>
</div>

The problem is that i need to change .emoji-menu's div property to display:none whenever the img tag inside it gets clicked(please refer the code), I have tried with different selectors but it didn't work.

I think <a href="javascript:void(0)" is causing problem. Please help me on this.

Answer 1

With angular you can use ngClick and ngShow for these things:

<div ng-show="thisEmoji" class="emoji-menu" style="top: 913px; left: 1211.5px; display: block;">
  <div class="emoji-items-wrap1">
    <div class="emoji-items-wrap nano mobile_scrollable_wrap has-scrollbar">
      <div class="emoji-items nano-content" tabindex="-1" style="right: -17px;">
        <img ng-click="thisEmoji = true" src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -360px 0px no-repeat;background-size:540px 140px;" alt=":unamused:">
        <span class="label">:unamused:</span>
        <img ng-click="thisEmoji = true" src="img/blank.gif" class="img" style="display:inline-block;width:20px;height:20px;background:url('img/emojisprite_0.png') -440px 0px no-repeat;background-size:540px 140px;" alt=":joy:">
        <span class="label">:joy:</span>
      </div>
    </div>
  </div>
</div>

The a tag could be replaced with removed as it only ads a title to the element. I seem to rememeber the alt attribute on img does the same.

Answer 2

If your html snippet appends the document dynamically, you should bind the click events of images . Hope this helps

$("body").on("click",".emoji-items img",function(){
$(".emoji-menu").fadeOut();
})