onclick属性无法正常工作

Question

I have a jquery file as follow :

$('.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();
    });

And the function saveMe is defined as follow :

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

But when i click any of the button i get the following error : Uncaught ReferenceError: saveMe is not defined

Can anyone help me on this ?

Thanks in advance!

Answer 1

The line

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

renders as

onclick='saveMe(arial);'

So when you click on it, it is looking for a variable arial not the string "arial" . You need to quote it.

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

Now for saveMe not being defined, that needs to have more context. When is saveMe defined? If it is inside of a document ready/window onload method, than you need to put it outside of it so it is available in window scope.

And the line

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

Should probably be

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

Answer 2

The most important thing is where the saveMe function is defined. onclick has only access to global scope and that's there the fuction would have to be for this solution to work.

That'd be a quick workaround:

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

However, you should note that cluttering global scope is usually undesirable and quickly leads to errors. It's better to attach events to selected elements by using .click() . In your code - you can attach the element and then bind click event to it.

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

EDIT: As epascarello also pointed out - the string is not escaped properly

Answer 3

I'm guessing saveMe is out of scope, you probably put it inside the DOM ready handler.

As you're using jQuery, why not use it, and get rid of those inline event handlers

$(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

You could simply add this code and get rid of the code in the markup:

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

OR perhaps better make this change:

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

then this works and is less prone to error perhaps:

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