我有一个绑定到div的javascript函数,并展开一个表单。表单可用后,我想将click事件绑定到表单提交。我对Javascript不太满意,所以我认为这可能是一个概念和语法问题。
这就是我之前所拥有的,但它不起作用,因为表单提交绑定在表单提交可用之前发生。
// submits forms
$('#submitLogin').bind('touchstart', {formID:'#login_post'}, submitForm);
$('#submitMobileFreeTrial').bind('touchstart', {formID:'#free_trial_post'}, submitForm);
//expands forms
$('#forms p.single_form').bind('click', function(e){
e.preventDefault();
var $this = $(this);
var url = $this.find('a').attr('rel');
if(!$this.hasClass('expanded')){
if(!$this.data('loaded')){
// Make Ajax call to load articles
$this.next().load(url, function(){
$this.addClass('expanded');
$this.next().show;
$this.data('loaded', true);
return false;
});
}
else {
// Just expand the row with no ajax call
$this.addClass('expanded');
$this.next().show();
}
}
else {
$this.removeClass('expanded');
$this.next().hide();
}
});
我尝试用回调和诊断来重写它
console.log($('#submitLogin'));
结果
[context: document, selector: "#submitLogin", init: function, selector: "", jquery: "1.4.2"…]
而不是预期的
[a#submitLogin.whiteButton, context: document, selector: "#submitLogin", init: function, selector: "", jquery: "1.4.2"…]
function submitForms() {
$('#submitLogin').bind('click', {formID:'#login_post'}, submitForm);
$('#submitMobileFreeTrial').bind('click', {formID:'#free_trial_post'}, submitForm);
console.log($('#submitLogin'));
}
$('#forms p.single_form').bind('click', function(e){
e.preventDefault();
var $this = $(this);
var url = $this.find('a').attr('rel');
if(!$this.hasClass('expanded')){
if(!$this.data('loaded')){
// Make Ajax call to load forms
$this.next().load(url, function(){
$this.addClass('expanded');
$this.next().show;
$this.data('loaded', true);
return false;
});
}
else {
// Just expand the row with no ajax call
$this.addClass('expanded');
$this.next().show();
}
}
else {
$this.removeClass('expanded');
$this.next().hide();
}
submitForms();
});