0

我有一个脚本（出于这个问题的目的：），script.js它被注入到每个页面中（连同jquery.js）。
script.js应该向页面添加一个额外的元素（elem），当点击它时，会调用一个my_funcinside script.js。

麻烦的是，当元素被点击时，总是有一个ReferenceError: my_func is not defined, ，但它是在script.js. 我意识到这与“隔离环境”的事情有关..但我不知道如何解决这个问题..

PS.: Chrome、JS 和 JQuery 的新手。
历史：Python :)

一些代码（只是添加了元素）：

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弹出，当用户单击它时，它会记录一条消息。

4

2 回答 2

0

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

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

elem.click( my_func );

有关其他注意事项，请参阅 torazaburo 的回答。

于 2013-05-12T15:22:30.423 回答
0

第一个问题是你为什么要这样做。抱歉，如果您希望人们真正帮助您解决纯粹机械问题之外的任何问题，您确实需要回答这个问题。

例如，根据您正在做的事情，您可以通过使用::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);
}

通过将positionCSS 属性的值更改为relative. 除非您还指定诸如top. 顺便说一句，检查 a positionofstatic可能不会做你想做的事——只有当相关元素具有明确的静态位置时，此检查才会成功，要么在style属性中指定，要么通过.css调用预先设置。因此，您将财产价值更改为relative可能永远不会发生。

在任何情况下，如果由于某种原因原始 HTML 没有这个，并且您真的想动态添加它，那么只需将一个类添加到所需的元素，然后使用 CSS 规则来设置position以及您设置的任何其他属性，就会更加简洁想要改变，而不是在每个元素上摆弄 CSS。这就是类和 CSS 规则的用途：

get_desired().addClass("desired");

假设get_desired返回一个 jQuery DOM 集合。如果你是链式风格的爱好者，你也可以在这里设置事件处理程序

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

那么，刚刚

.desired {
    position: relative;
}

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

于 2013-05-12T13:44:39.217 回答