如何在AJAX重写对话框后重新绑定对话框？

Question

我有一个学生表,每行都有他们的名字,一个选择列表来选择他们的课程参加,然后点击"消息"链接会弹出一个对话框向学生发送消息.

该表由选择的课程列表动态驱动.例如,教师选择一门课程,然后该课程将重新填充该课程中的所有学生.这是通过AJAX完成的.每次选择课程时,表体基本上都会被写入.我的问题是,当选择新课程时,对话框的div在Message链接的单元格内变得可见.我怀疑问题与AJAX有关,无法重新绑定链接和点击事件.因此,我如何克服这一点？

这是我用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:

/** 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

一切正常,直到选择新的课程并且文本区域在单元格内变得可见.我上个月刚刚开始使用jQuery,所以请耐心等待!

Answer 1

您不应该使用click()动态添加到页面的元素,因为此jQuery方法无法将未来事件绑定到这些元素.它适用于静态页面和文档,但不适用于在页面上插入,删除或修改对象的功能.

相反,您需要使用on()它,因为它允许您绑定未来事件.你需要像这样实现它:

$(document).on('change', '#courseSelect', function()
{ 
  // Your existing code here
}

目前,从事物的声音来看,你只是live()用作潜在的替代品.不要使用它,因为从jQuery 1.7开始,它已被弃用.重构全力以赴过期这样的代码可以在任何网络项目绝对必要的-你不能只是拒绝改变,因为范围和现有的实现深度的东西.事实上,这应该只会激励你更多:因为如果你使用已弃用的软件离开网站会出现问题.

如果你不确定如何从改变live()到on(),看到jQuery的文档,它提供了一个简洁和简单的方法来更新现有的功能.