javascript - 如何在(protip)工具提示内容上注册 'click' 事件？

Question

我正在使用http://protip.rocks/因为它是工具提示，但我遇到了问题。

所以我有:

<span class="tooltip_templates">
            <span id="tooltip_content_{TAB_LOOP.ITEM_LOOP.ITEM_ID}">
            <!-- BEGIN ITEM_LOOP.CHILD_ITEM_LOOP -->
            <!-- IF TAB_LOOP.ITEM_LOOP.ITEM_ID == TAB_LOOP.ITEM_LOOP.CHILD_ITEM_LOOP.P_ID -->
            <a href ="#"><img class = 'hide' src ="{T_IMAGES_PATH}custom_avatars/item_thumbnails/{TAB_LOOP.ITEM_LOOP.CHILD_ITEM_LOOP.C_ID}.png" title ="{TAB_LOOP.ITEM_LOOP.ITEM_NAME}" id ="{TAB_LOOP.ITEM_LOOP.CHILD_ITEM_LOOP.C_ID}"/></a>
            <!-- ENDIF -->
            <!-- END ITEM_LOOP.CHILD_ITEM_LOOP -->
             <a href = "#"><img class = 'hide' src ="{T_IMAGES_PATH}custom_avatars/item_thumbnails/{TAB_LOOP.ITEM_LOOP.ITEM_ID}.png" title ="{TAB_LOOP.ITEM_LOOP.ITEM_NAME}" id ="{TAB_LOOP.ITEM_LOOP.ITEM_ID}" /></a>
            </span>
          </span>

和

 $( ".tooltip_templates img" ).click(function() {
      alert("ok"); 
  });`

这里没有触发事件，所以我检查了页面的来源并看到

所以看起来内容已移动到 protip-content 但是，将 click 函数的类更改为 .protip-content 也不会触发该事件。有什么想法吗？

我尝试通过向所有图像点击附加警报来进行一些测试，正如您所看到的，单击工具提示内的图像时不会调用该事件..

Answer 1

你就快到了。我认为你的 DOM 元素 [.tooltip_templates img] 没有调用该事件的原因是因为在 $(document).ready() 之后它没有在 DOM 中被调用。您需要使用 [.on] 或 [.delegate] 附加并触发这些事件:

引用文献:

[上] = http://api.jquery.com/on/

[委托(delegate)] = http://api.jquery.com/delegate/

$('.tooltip_templates img').on('click', function(event) {
    event.preventDefault();
    alert('here');
});

这是一个用于示例引用的 jsfiddle: http://jsfiddle.net/qrgphhu6/