对象文字中的事件处理程序不会触发
我创建了一个Wordpress插件,并且创建了一个对象字面量,我想封装所有的逻辑,但似乎无法获取要触发的事件处理程序。对象文字中的事件处理程序不会触发
我使用jQuery 1.7.1
首先,我有一个正在通过PHP创建的数据行:
<div class="table-wrapper">
<?php
global $wpdb;
$students = $wpdb->get_results("SELECT studentID, lname, fname, email FROM student");
foreach($students as $student) : ?>
<div class="row" id="<?php echo $student->studentID; ?>" >
<div class="last_name">
<h4><?php echo __($student->lname); ?></h4>
</div>
<div class="first_name">
<h4><?php echo __($student->fname); ?></h4>
</div>
<div class="phone">
<h4><?php echo __($student->phone); ?></h4>
</div>
<div class="email">
<h4><?php echo __($student->email); ?></h4>
</div>
</div><!-- /row -->
<?php endforeach; ?>
<div id="new">
<button id="new_student"><?php echo __('Add New Student'); ?></button>
</div>
</div><!-- /table-wrapper -->
这是我的JavaScript/jQuery的文件:
var Student = {
init: function(config) {
this.config = config;
this.isDisplayed = false;
console.log('in init'); // this fires upon instantiation
this.bindEvents();
},
bindEvents: function(){
console.log('in bind'); // this fires upon instantiation
this.config.studentSelection.on('click', '.row', this.config.fetchStudentDetails);
console.log('after'); // this does NOT fire
},
fetchStudentDetails: function() {
var self = Student;
alert('in event'); // this does NOT fire
}
};
Student.init({
studentID: jQuery('.row').attr('id'),
studentSelection: jQuery('.table-wrapper')
});
我已经尝试了一些小的变体,例如将'.row'传递给studentSelection变量,并试图直接在bindEvents方法中将事件处理程序绑定到它:
bindEvents: function(){
console.log('in bind'); // this fires upon instantiation
this.config.studentSelection.on('click', this.config.fetchStudentDetails);
console.log('after'); // this does NOT fire
},
Student.init({
studentID: jQuery('.row').attr('id'),
studentSelection: jQuery('.row')
});
我,不过,能当我写了这样的代码火单击事件:
jQuery('.row').click, function(){
console.log('in click event');
});
我不明白发生了什么,所以如果有人能提供一些线索在上面或指向正确的方向我会很感激。
您的this
上下文都是错误的。 this.config.studentSelection
是undefined
以及this.config.fetchStudentDetails
。 this
是指bindEvents
而不是init
。我建议你在这里使用不同的模式。这样的事情:
var Student = function (config) {
config = config || {};
var that = this, // In case you need to use the original `this`
isDisplayed = false;
var init = function() {
console.log('in init');
bindEvents();
};
var bindEvents = function() {
console.log('in bind');
config.studentSelection.on('click', '.row', fetchStudentDetails);
console.log('after');
};
var fetchStudentDetails = function() {
// var self = Student; <-- Use `that`
alert('in event');
};
return {
init: init,
bindEvents: bindEvents,
fetchStudentDetails: fetchStudentDetails
}
};
// Create a new student
var student = new Student({ ... });
student.init();
感谢您的回复。我希望我可以说我明白了一切,但由于我仍然试图围绕对象字面符号来描述这种模式,所以我还没有看到两者之间的好处/差异。我也试过你的代码,它仍然不起作用,我从来没有在bindEvents中看到console.log('''')'语句,这导致我相信'config.studentSelection有错误。 on('click','.row',fetchStudentDetails)'语句,代码似乎停止在那里。 – 2012-03-23 02:14:31
不应该'this.config.fetchStudentDetails'是'this.fetchStudentDetails'? – 2012-03-23 01:31:35
谢谢你回答这么快Paolo。这实际上也不起作用,我也尝试使用Student.fetchStudentDetails调用它,但无济于事。 – 2012-03-23 01:37:36