文档点击不适用于动态元素答案

【问题标题】：Document click not working on dynamic element文档点击不适用于动态元素
【发布时间】：2018-05-11 11:24:39
【问题描述】：

内容脚本：

var $ = window.$.noConflict(true); // Required for IE

function startFunc() {

    $('a').mouseover(function(e){

        var anchor=this;
        var href=$(anchor).attr('href');

        if(href!='#'){

            $('.klik-me').remove();

            const xPos=e.pageX-20;
            const yPos=e.pageY-20;

            let $klikMe=$('<span class="klik-me">Click Me!!</span>').css({
                'padding':'5px',
                'background':'#000',
                'color':'#FFF',
                'font-size':'12px',
                'position':'static',
                'top':yPos,
                'left':xPos,
                'text-align':'center',
                'z-index':999999
            });

            $(anchor).append($klikMe);
        }

    });


}

$('body').on('click','.klik-me',function(){

    const href_in=$(this).parent().attr('href');

    kango.console.log(href_in);

    kango.dispatchMessage('storeHref', {href:href_in});
});


kango.addMessageListener('hrefSuccess', function(event) {

    kango.console.log(event.data.link);

});

后台脚本：

kango.addMessageListener('storeHref', function(event) {

event.target.dispatchMessage('hrefSuccess', {link:event.data.href});

});

我正在为页面上的所有锚标签添加一个弹出窗口（这工作正常），我在 Jquery 中添加了一个点击事件（我喜欢这个）并使用kango.dispatchMessage 将消息发送到后台脚本。似乎没有任何效果。

任何帮助将不胜感激。

PS：我以前使用过 crossrider(Awesome) 框架。

【问题讨论】：

它应该适用于动态元素。 :=> $('body').on('click', 'klik-me', function() { // 做点什么 });
“似乎没有任何效果” 到底是什么意思？您的浏览器控制台是否有任何错误？
在点击功能上我正在将父 href 写入控制台我在控制台中看不到它
您将需要尝试停止点击事件 a) 冒泡到您的 <a> 元素和 b) 触发默认操作，即导航到 href 属性值.见stackoverflow.com/questions/1967537/…

标签： javascript jquery browser-extension crossrider kango-framework

【解决方案1】：

我认为正在发生的是 click 事件正在冒泡到您的 <a> 元素并触发默认导航操作。

在委托事件处理中停止冒泡/默认行为是困难的。我会做的是将<span> 作为<a> 的子级删除。例如

let $klikMe = $('<span class="klik-me">Click Me!!</span>')
  .css({ ... })
  .data('href', href) // set the href data into the <span>

$(document.body).append($klikMe) // append to body, not anchor

在您的点击处理程序中

$(document).on('click', '.klick-me', function() {
  const href_in = $(this).data('href')

  // then continue as in your original code

  return false // the click should have no default action
})

【讨论】：

【解决方案2】：

使用下面的 sn-p 是我在任何地方都在阅读的内容，但是我无法让它工作。

目前正在尝试做同样的事情：jQuery click event after new page loads

也许它会有一些用处。

干杯。

$(parent).on('click', child , callback);

【讨论】：