javascript - 为类名引用的表类添加按按钮类名的onclick监听器

Question

编辑:使用此 jsfiddle 可能更容易理解我的问题的核心:jsfiddle.net/rzdhm6xe

我正在开发一个处理事件创建的网站。我正在使用:

• Parse.js:1.4.2
• JQuery:1.11.2 和 1.10.3(用户界面)
• Twitter Bootstrap :3.3.4

我无法发布整个 html 文件，因为我正在大量使用 .hide() 和 .show()

HTML:

<!-- Team Settings CONTENT -->
<div id="dashboard_nav_team_settings_content">


</div><!--/ Team Settings CONTENT -->

加载上面的div时jquery就是这个

//<TEAM SETTINGS PAGE>
        for(var i = 0; i < parseQueryList.length; i++)
        {
// how to truncate a string
            var title = '';
            title = 'Bowl: ' + parseQueryList[i].get('title');

            var team_settings_content = "";
            team_settings_content = 
                '<div class="panel panel-primary">' +
                    '<div class="panel-heading">' +
                        '<h3 class="panel-title" style="display:inline-block;">' + title + '</h3>'+
                        '<button type="button" class="btn btn-sm btn-default" style="position:relative; display:block; float:right; bottom:5px">Email All</button>' +
                        '<button type="button" class="btn btn-sm btn-info  bowlManagAddPerson" style="position:relative; display:block; float:right; right: 10px; bottom:5px">Add</button>' +
                    '</div>' +
                    '<div class="panel-body bowlManage">' +
                        '<div class="col-md-12 table-responsive">' +
                            '<table class="table table-striped table-hover bowlmanagetable">' +
                                '<thead>' +
                                    '<tr>' +
                                    '<th>First Name</th>' +
                                    '<th>Last Name</th>' +
                                    '<th>Role</th>'+
                                    '<th>Email</th>' +
                                    '<th>School</th>'+
                                    '<th>Actions</th>'+
                                    '</tr>' +
                                '</thead>' +
                                '<tbody class="team_settings_row">';

                            var row = '';
                            var firstName = '';
                            var lastName = '';
                            var object = parseQueryList[i].get("organizer");    
                            var objectTwo = parseQueryList[i].get("coach");
                            var objectThree = parseQueryList[i].get("student");
                            var coachObjects = [];
                            var studentObjects = [];
                            var role ='';
                            var outerNumber;
                            var school = '';
                            var email = '';

                            for(outerNumber = 0; outerNumber < 3; ++outerNumber)
                            {
                                role ='';
                                // ORGANIZERS
                                if(outerNumber == 0)
                                {
                                    role = 'Organizer';                             
                                }
                                // coaches
                                else if(outerNumber == 1)
                                {
                                    role = 'Coach';
                                    object =  [];
                                    object = objectTwo;
                                }
                                // students
                                else{
                                    role = 'Student';
                                    object =  [];
                                    object = objectThree;
                                }

                                var q;
                                for (q = 0; q < object.length; ++q) 
                                {                               
                                    var t;  
                                    for(t = 0; t < userQueryList.length; ++t)
                                    {
                                        if(userQueryList[t].id == object[q])
                                        {
                                            firstName = userQueryList[t].get('firstName');
                                            lastName = userQueryList[t].get('lastName');
                                            school = userQueryList[t].get('school');
                                            email = userQueryList[t].get('email');
                                            row = row + 
                                            '<tr>' +
                                                '<td>'+ firstName +'</td>' +
                                                '<td>'+ lastName +'</td>' +
                                                '<td>'+ role +'</td>' +
                                                '<td>'+ '<a href="mailto:'+ email +'?Subject=Ethics Bowl:&body=body" target="_top">'+ email +'</a>' + '</td>'+
                                                '<td>'+ school + '</td>' +
                                                '<td>' +
                                                    '<div class="btn-group">' +
                                                        '<button class="btn btn-primary dropdown-toggle" href="#" data-toggle="dropdown" style="text-center;">' +
                                                        '<span>Actions</span> <span class="caret"></span>' +
                                                        '</button>' +
                                                        '<ul class="dropdown-menu stay-open pull-right" role="menu" style="padding-top: 25px; padding-right: 50px; padding-bottom: 25px; padding-left: 50px; text-align:center;">' +
                                                            '<li><button class="btn btn-warning editManageBowl">Edit</button></li>' +
                                                            '<br>' +
                                                            '<li><button class="btn btn-danger deleteBowl">Delete</button></li>' +
                                                        '</ul>' +
                                                    '</div>' +
                                                '</td>'+
                                            '</tr>';
                                        }
                                    }
                                }
                            }                               
                            var ending = '</tbody>' +
                            '</table>' +
                        '</div>' +
                    '</div>' +
                '</div>';

            $('#dashboard_nav_team_settings_content').append(team_settings_content + row + ending);         
            //</TEAM SETTINGS PAGE>
        }
    });

    $('.bowlManagAddPerson').click(function(event)
    {
        event.preventDefault();
        alert('1');

    });

我坚持的事实是 bowlManageAddPerson 按钮 onclick 监听器永远不会在动态添加的表和行中触发。它是表格右上角的亮蓝色按钮。我目前无法唯一地引用它们，并且很难在我当前的代码中看到这样做的方法。

以下是表格填充内容的示例。出于隐私原因，我排除了姓名和电子邮件。我认为这将是涉及 .closest() 的东西，但在我弄清楚为什么我不能通过类名为具有类的表调用 onclick 监听器之前，我不能尝试任何一个姓名。

Answer 1

动态创建的元素需要on事件

Jquery On event

$('#yourTABLEId').on('click', '.bowlManagAddPerson' ,function(event)
{
    event.preventDefault();
    alert('1');
});

无论如何使用它实际上更好。考虑到您的表格每 100 行中是否有一个按钮。您不是将事件实际分配给每个 按钮，而是为表分配一个监听器，该监听器监视按钮点击(参见上面的示例)。

on 事件基本上是动态创建对象的监听器。加载文档并分配所有 click、blur 等 事件后，您需要它来监视传递了类或 ID 名称的新元素。