Leafet - Loading and Instantiating WFS data on Demand

Here's how I ended up doing this. I have a custom checkbox (not in the official Leaflet layer control) that calls a function to load the WFS layer. This saves on the amount of data having to be downloaded on the initial page load, especially if the user never even turns this layer on. There is a variable in the checkbox which I pull in to the toggling function to determine which layer to load. When checking the box and turning the layer on I do some checking to make sure that the layer doesn't already exist. If it does, it skips the WFS call and just adds it to the map.

Note that the geojson layer is instantiated, albeit emptily, before the WFS call. This makes sure stuff like the styling and popup are already set before you add it to the map. Also note that this is using jsonp to avoid cors issues (make sure you have this enabled - i'm using Geoserver so was a simple uncommenting in the web.xml file I think). This works for point, line, polygon etc.

In my HTML:

<input type="checkbox" name="layerNameforYouToReplace" onclick="layerToggleWFS(this)" />

In map.js:

var layerNameforYouToReplace = L.geoJson(null, {style: yourStyleFunction
                ,onEachFeature:yourPopup
                });

var geoJsonUrl = 'https://yourserver/geoserver/yourWorkspace/ows';
var wfsParams =
{
    service: 'WFS',
    version: '1.0.0',
    request: 'getFeature',
    outputFormat: 'text/javascript',
    format_options: 'callback:parseReponse',
    // dataType: 'jsonp',
    srsName: 'EPSG:4326'
}
function layerToggleWFS (box) {
console.log(eval(box.name));
var present = eval(box.name).getLayers().length
console.log(present)
if(box.checked) {
    if (present != 0) {
        console.log((eval(box.name)).getLayers().length)
        map.addLayer(eval(box.name))
        console.log(present)
    } else {
    console.log(present)
    map.addLayer(eval(box.name));
    $.ajax({
        url : geoJsonUrl + L.Util.getParamString(wfsParams) + '&typeName=yourWorkspace%3A' + box.name,
        dataType : 'jsonp',
        jsonpCallback: 'parseReponse',
        success : function handleJson(data) {
        console.log(data)
        eval(box.name).addData(data);
        }
    });
}
} else {
    console.log(box.checked)
    map.removeLayer(eval(box.name));
}

}

Hope this helps someone!