Question

我有一个jquery文件如下：

$('.font').click(function(){
        for(i=0;i<FontArray.length;i++){
            var font = FontArray[i]; 
            $('#view_container').append("<button class='b_font' id='"+font+"' onclick='saveMe("+font+");'>"+font+"</button>");
            $('.'+font).css('font-family',font);
        }
        // event.preventDefault();
    });

功能 saveMe 定义如下：

function saveMe(font){
        alert(font);
    }

但是当我点击任何一个按钮时，我收到以下错误： 未捕获的ReferenceError：未定义saveMe

有人可以帮我吗？

提前致谢！

Answer 1

该行

onclick='saveMe("+font+");'

呈现为

onclick='saveMe(arial);'

因此，当您单击它时，它正在查找变量arial而不是字符串"arial"。你需要引用它。

onclick='saveMe(\""+font+"\");'

现在，对于未定义的saveMe，需要有更多上下文。 saveMe何时定义？如果它位于文档就绪/窗口onload方法的内部，则需要将它放在它之外，以便在窗口范围内可用。

行

$('.'+font).css('font-family',font);

应该是

$('#'+font).css('font-family',font);

Answer 2

最重要的是定义saveMe函数的位置。 onclick只能访问全局范围，并且必须有这个解决方案才能工作。

这是一个快速的解决方法：

window.saveMe = function (font){
    alert(font);
}

但是，您应该注意到，杂乱的全局范围通常是不受欢迎的，并且很快就会导致错误。最好使用.click()将事件附加到所选元素。在您的代码中 - 您可以附加元素，然后将click事件绑定到它。

var $button = $("<button class='b_font' id='"+font+"' onclick='saveMe("+font+");'>"+font+"</button>");
$('#view_container').append($button);
$button.click(function () {
    alert($(this).attr('id'));
});

编辑：正如epascarello所指出的那样 - 字符串未正确转义

Answer 3

我猜saveMe超出范围，你可能把它放在DOM就绪处理程序中。

当你使用jQuery时，为什么不使用它，并摆脱那些内联事件处理程序

$(function() {

    $('.font').click(function() {
        $('#view_container').append(
            $.map(FontArray, function(index, font) {
                return $('<button />', {
                            'class' : 'b_font',
                            id      : font,
                            on      : { click : saveMe },
                            css     : { fontFamily : font }
                })
            })
        )
    });

    function saveMe() {...}

});

Answer 4

您可以简单地添加此代码并删除标记中的代码：

$('#view_container').on('click','.b_font',function(){
  saveMe($(this).text());
});

或者更好地做出这样的改变：

$('#view_container').append("<button class='b_font' id='"+font+"' data-fontsave='"+font+"'>"+font+"</button>");

然后这可行并且不太容易出错：

$('#view_container').on('click','.b_font',function(){
  saveMe($(this).data('fontsave'));
});

onclick属性未按预期工作

4 个答案: