Question

我有一个脚本（为了这个问题的目的：script.js），它被注入每个页面（以及jquery.js）。
script.js应该向页面添加一个额外的元素（elem），单击该元素后，会在my_func内调用script.js。

问题在于，单击元素时始终存在ReferenceError: my_func is not defined，但它在script.js中定义。我意识到它与“孤立环境”有关...但我不知道如何解决这个问题..

PS：Chrome，JS和JQuery的新手 _{历史：Python：）}

一些代码（只是添加elem）：

function on_ready(){
    var wanted = get_desired() // fetch desirable elements
    add_to_all(wanted) // this calls add for every element in wanted
}
function add(obj_to_edit) {
    if (obj_to_edit.css('position') == 'static'){
        obj_to_edit.css('position','relative')}

    var elem = $("<div ... onclick='my_func(this)'>...</div>")

    obj_to_edit.mouseenter(show_button);
    obj_to_edit.mouseleave(hide_button);
    elem.prependTo(obj_to_edit);
    elem.hide()
}

function my_func(elem){
    console.log($(elem).parent().html)
}

$(document).ready(on_ready);

这个想法是当有人在某个对象上盘旋时，弹出elem，当用户点击它时，它会记录一条消息..

Answer 1

第一个问题是你为什么要这样做。对不起，如果您希望人们真正帮助您解决纯粹的机械问题，您需要回答这个问题。

例如，根据您正在做的事情，使用::before伪元素可以更好地使用其可见性响应hover状态：

.desired::before {
    content: "Press me!";
    display: none;
}
.desired::before:hover {
    display: block;
}

就是这样 - 没有插入，没有mouseenter或mouseleave事件，只有纯CSS。

在设置事件处理程序方面，你使用旧式onclick属性有点奇怪，当然现代方法是

elem.on("click",function(){...});

或者，更干净一点

elem.on("click",my_func);

其中my_func被this重写为有问题的元素：

function my_func(){
    console.log($(this).parent().html);
}

我没有通过将position CSS属性的值更改为relative来获得您要完成的任务。除非您还指定top等属性，否则此操作无效。顺便说一句，position static style的检查将不会做你想做的事情 - 只有当有问题的元素有一个明确的静态位置时，这个检查才会成功，或者通过指定.css属性或之前由relative调用设置的属性。因此，您可能永远不会将属性值更改为position。

在任何情况下，如果由于某种原因原始HTML没有这个，并且你真的想要动态添加它，那么只需将类添加到所需元素然后使用CSS规则来设置{{} 1}}以及你要改变的其他任何属性，与在每个元素上使用CSS进行讨论相比。这就是类和CSS规则的用途：

get_desired().addClass("desired");

假设get_desired返回jQuery DOM集合。如果您是链式样式的狂热爱好者，您也可以使用

设置事件处理程序

get_desired().addClass("desired").on("click",my_func);

然后，只是

.desired {
    position: relative;
}

至于您提出的具体问题，如果您的代码实际上与您展示的一样，那么当然应该找到my_func。所以其他事情正在发生。让人们在这里帮助您追踪问题的唯一方法就是显示所有代码。

Answer 2

正如您所猜测的那样，您获得ReferenceError: my_func is not defined的原因与“隔离环境”事物有关。 html属性中定义的onclick处理程序在普通页面上下文中运行，而您的函数在内容脚本上下文中定义。

问题的解决方案是以编程方式添加点击处理程序，这无论如何都是更好的做法。只需从html字符串中删除onclick='my_func(this)'，然后添加以下行：

elem.click( my_func );

出于其他考虑，请参阅torazaburo的回答。

从带有扩展名的html页面调用脚本中的函数

2 个答案: