我有同学和每行表中的他们的名字，一个选择列表来选择他们的出席对他们的教训，然后单击时信息链接会弹出对话框机管局将消息发送给学生。
I have a table of students and in each row are their names, a select list to select their attendance for their lesson and then a "Message" link when clicked will popup a a dialog to send a message to the student.
该表是通过动态的课程选择列表驱动。例如，教师选择一门课程，然后将表重新填充与课程中的所有学生。这是通过AJAX的完成。表体基本上得到书面的课程选择每次。我的问题是这样的，在选择一个新的课程，在div为对话成为消息链路的小区内可见。我怀疑，问题是做AJAX和不能够重新绑定连接，然后单击事件。怎样因此克服这个？
The table is dynamically driven by a select list of courses. For example, a teacher selects a course and then the table is repopulated with all the students within that course. This is done through AJAX. The table body is basically getting written every time a course is selected. My problem is this, when a new course is selected, the div for the dialog becomes visible inside the cell of the Message link. I suspect the problem is to do with AJAX and not being able to rebind the link and click event. How do I therefore overcome this?
这是我在PHP中生成的表（http://pastebin.com/CTD3WfL6）：
This is my table generated in PHP (http://pastebin.com/CTD3WfL6):
public function createTable($cid)
{
$userModel = new Users();
$attendanceModel = new Attendance();
$students = $userModel->getStudents($cid);
$table2 = '<table id="tutorTable">';
$tableHeaders =
'<thead>
<th>Student Name</th>
<th>Attendance</th>
<th>Message</th>
<th>Mobile</th>
<th>Parent Name</th>
<th>Message</th>
</thead>
<tbody>';
$table2 .= $tableHeaders;
foreach($students as $student)
{
$table2 .=
'<tr><td id="studentName">'.$student['firstname'].' '.$student['lastname'].'</td>
<td>
<select class="attendSelect" id="studentSelect"'.$student['id'].'>
<option value="Attended">Attended</option>
<option value="Absent">Did not Attend</option>
<option value="Excused Absent">Excused</option>
<option value="Late">Excused</option>
<option value="Excused Late">Did not Attend</option>
</select>
</td>
<td>
<a href="#MessageStudent" class="popUpLink">Message</a>
<div class="popUpDialog" id="'.$student['id'].'" title="Message '.$student['firstname'].' '.$student['lastname'].'">
<form id="studentForm" action="" method="POST">
<fieldset>
<input type="hidden" value="message_send" name="action"/>
<input type="hidden" value="'.$student['id'].'" name="studentId"/>
<textarea rows="3" cols=35" name="message"></textarea>
<input type="submit" value="Send Message"/>
</fieldset>
</form>
</div>
</td>
<td>'.$student['phone1'].'</td>
<td>Parent name goes here</td>
<td>
<a href="mailto:ParentsEmail@email.com" id="parentEmail">Message</a>
</td>
</tr>';
}
$table2 .= '</tbody></table>';
return $table2;
}
这是jQuery的处理对话框和表：
This is the jQuery to handle the dialog and the table:
/** Dialog Handler **/
$('.popUpLink').each(function()
{
$divDialog = $(this).next('.popUpDialog');
$.data(this, 'dialog', $divDialog.dialog(
{
autoOpen: false,
modal: true,
title: $divDialog.attr('title')
}));
}).on('click',function()
{
$.data(this, 'dialog').dialog('open');
return false;
});
/**AJAX to handle table **/
$('#courseSelect').on('change', function()
{
var cid = $('#courseSelect').val();
$.getJSON('?ajax=true&cid=' + cid, function(data)
{
var lessonSelect = "";
var count = 1;
/** populate select list of lessons **/
for(var i in data.lessons)
{
lessonSelect += '<option id="' + count + '" value="' + data.lessons[i].id+ '">' + data.lessons[i].name + '</option>'
count++;
};
var lessonDialog = '<p>' + data.lessons[0].name + '</p>';
var launchLessonDiv = '<a href=" ' + data.launchLesson.reference + ' ">Launch Lesson</a>';
var courseDialog = '<p>' + data.course.fullname + '</p>';
$('#lessonSelect').html(lessonSelect);
$('#lessonDialog').html(lessonDialog);//insert lesson information into lesson dialog
$('#launchLessonDiv').html(launchLessonDiv);//insert link to launch lesson
$('#courseDialog').html(courseDialog);
/**Repopulate table **/
//var lessonCount = 1;
//var table = createTutorTable(data, cid, lessonCount);
//$('table#tutorTable>tbody').html(table);
$('form#tutorTableForm').html(data.table);
});//getJSON
});//Course select
一切工作正常，直到一个新的课程选择和textarea的细胞内变得可见。我才刚刚开始jQuery的最后一个月，所以忍耐！
Everything works fine until a new course is selected and the textarea becomes visible inside the cell. I've only just started jQuery last month so bear with me!
推荐答案
据我理解，每一行都有自己的标记对话和code只执行一次，在页面加载创建的对话框：
As I understands, each row has its own markup for dialogs and the code that creates those dialogs is executed only once, during page load:
/** Dialog Handler **/
$('.popUpLink').each(function()
{ ... }
但是，这code应该算得上启动和每次重新填充表格的时间，因为标记的对话框位于一行细胞内部。我建议你把这个code函数中的：
But this code should be called on startup AND every time you repopulate your table, because markup for dialogs is located inside row cells. I suggest you to put this code in a function:
var initDialogs = function() {
$('.popUpLink').each(function()
{
...
}).on('click', function(){
...
});
}
页面加载后立即调用它，每次重新填充表：
Call it right after page load, and each time you repopulate table:
initDialogs();
$('#courseSelect').on('change', function()
{
var cid = $('#courseSelect').val();
$.getJSON('?ajax=true&cid=' + cid, function(data)
{
// .. lots of code here
// then you populate your table
// (can't find #formTableForm in your example though)
//$('table#tutorTable>tbody').html(table);
$('form#tutorTableForm').html(data.table);
// now your table filled, old dialogs gone.
// init dialogs again.
initDialogs();
});//getJSON
});
另外，我注意到你如何创建foreach循环在你的表行。每一行都会有相同的ID，像这样的＆LT; TD ID =studentName＆GT; 。有重复的页面上的许多ID的也不行，它可以导致问题难以调试。
Also, I noticed how you create your table rows inside foreach loop. Every row will have the same id's, like this one <td id="studentName">. Having many id's repeated on the page is not OK, it can leads to problems that hard to debug.
我希望它能帮助。
编辑：只注意到，这几乎是相同的方法，@Lazerblade建议
Just noticed, it is almost the same approach that @Lazerblade proposed.
相关推荐
最新文章