jquery selector not working on events
Closed this issue · 3 comments
I have some code that runs onClick of a dom element, but I have some jquery selector code on the event callback, and I am constantly getting Uncaught ReferenceError: $ is not defined
. I made sure to put $ = require('jquery')
in the entry level code, and even tried putting cdn jquery before the mergedAssets script tag. The javascript code in question is as follows:
events: {
'click .on-submit' : 'onSubmit'
}
onSubmit: function() {
var email, city, interest, error;
if ( event.target.className === '.on-submit' ) {
email = $('#beta_email').val(),
city = $('#beta_location').val(),
interest = $('#beta_industry').val(),
error = $('.error-message');
} else if ( event.target.className === '.on-submit-top' ) {
email = $('#beta_email-top').val(),
city = $('#beta_location-top').val(),
interest = $('#beta_industry-top').val(),
error = $('.error-message-top');
}
}
does this have to do with dom elements being changed on client-side binding?
any suggestion on fixing this issue will be much appreciated, been struggling with this issue for a couple of days.
The $ selector seems to be working if i do it in the console on a breakpoint
hmm this seems to be resolved if i put $ = require('jquery')
in the individual views. Which is weird as all views extend the base, and i put $ = require('jquery')
in the baseView
As a sidenote, I'd say this.$el.find('...')
would generally be better, since that restricts it to the view. If another view also uses the same ids or classes, $('...')
would match those as well, which is usually not what's intended.