Question

编辑：这个jsfiddle可能更容易理解我的问题的核心：jsfiddle.net/rzdhm6xe

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

Parse.js：1.4.2
JQuery：1.11.2和1.10.3（U.I。）
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监听器之前我无法尝试任何其他内容。

enter image description here

Answer 1

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

Jquery On event

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

无论如何使用它实际上更好。如果你的桌子的每100行都有一个按钮，请考虑到这一点。而不是实际将事件分配给 EVERY 按钮，而是为表分配一个监听器，监视按钮点击（参见上面的示例）。

on事件基本上是动态创建对象的侦听器。加载文档并分配所有click, blur, etc个事件后，您需要查看已传递类或ID名称的新元素。

按类名引用的表类的按钮类名添加onclick侦听器

1 个答案: