Unexpected Behavior From JavaScript Split function (Chrome/Firefox)

Question

I add a string (i.e. 'Bob Smith') from a jQuery click event trapped using the on function . . .

$(".vendorLookup").on("click", { fullName: $(this).text() }, displayAddy);

In the displayAddy handler for the click event, I extract the string (a persons first and last name) and split out the first and last name . . .

var name = event.data.fullName;
var parts = name.split(" ");

IE can figure this one out but Chrome and Firefox will not split unless I use the regular expression split(/\s/) (unless I use the w3schools.com Tryit code editor and then it works).

Question: what exactly is going on here and when will I get bit by this later on when parsing for spaces cross-browser?

(Note: I don't think it matters but I am running this script on a wiki page in SharePoint 2010)

Answer 1

I'm not sure whats going on (I tested it and see some weird behavior), but you can work around it by doing something like this

function displayAddy() {

    var parts = $(this).text().split(" ");

    $('#fname').html(parts[0]);
    $('#lname').html(parts[1]);
}

$('#name').on("click", displayAddy);

Since the event is being passed off to a callback the callback already has a this object. in this instance the this object is going to be DOM object with the class #name.

Here's an example of it in action.