Question

使用的API

Parse.js：1.4.2
JQuery：1.11.2和1.10.3（U.I。）
Twitter Bootstrap：3.3.4

我正在设计一个商业网站，我被困在这个小部分。我想写的是一个引导表，由Parse.com填充以提供一些信息。用户应该能够点击行并随意编辑/删除它们。我不需要弄清楚编辑/删除过程;我需要的是检测给定行上的onclick的第一步。我在JQuery中尝试了各种选项，例如

$("table tr").click(function(){
    alert (this.rowIndex);
});

和

$('.dashboard_nav_team_settings_content').find('tr').click( function(){
  alert('You clicked row '+ ($(this).index()+1) );
});

然而，既不工作。通过“不工作”，我的意思是onclick听众永远不会被开除。我尝试将“任何表”引用到我给出的“碗设置”类名。下面是填充表格的图像。

Coolest table ever

部分问题可能在于我通过Parse.com动态填充每一行这一事实但我认为如果我给通用行一个类名并在我的onclick中引用它就不应该有问题监听器。

以下是关于我正在使用的代码的精简HTML代码段。我将所有内容填充到“dashboard_nav_team_settings_content”div标签中。

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title></title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/custom/dashboardMain.css" rel="stylesheet">

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- timepicker -->
    <!-- http://jonthornton.github.io/jquery-timepicker/ -->
    <link rel="stylesheet" type="text/css" href="css/custom/jquery.timepicker.css" />
    <link rel="stylesheet" type="text/css" href="css/custom/bootstrap-datepicker.css" />
    <link rel="stylesheet" type="text/css" href="css/custom/site.css" />
  </head>

  <body>
    <!-- navigation bar at the top -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="" id="dashboard_home_title_link">Ethics Bowls</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" id="dashboard_help">Help</a></li>
            <li><a href="" id="dashboard_log_out">Log Out</a></li>
          </ul>
          <!--<form class="navbar-form navbar-right">
            <input type="text" class="form-control" placeholder="Search...">
          </form> -->
        </div>
      </div>
    </nav>
    <div class="container">

      <div class="row row-offcanvas row-offcanvas-right">


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

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


       </div><!--/.col-xs-12.col-sm-9-->        

        <!-- left side navigation bar for content area -->
        <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar">
          <div class="list-group">
            <a href="#" class="list-group-item" id="dashboard_nav_home">Home</a>
            <a href="#" class="list-group-item" id="dashboard_nav_ethic_bowls">Create and Manage Bowls</a>
            <a href="#" class="list-group-item" id="dashboard_nav_team_settings"> Bowl Settings</a>
          </div>
        </div><!--/.sidebar-offcanvas-->
      </div><!--/row-->

      <hr>

      <footer>
        <p>&copy; </p>
      </footer>

    </div><!--/.container-->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.2.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script src="js/parse/dashboardMainjs.js"></script>
    <script type="text/javascript" src="js/parse/jquery.timepicker.js"></script>
    <script type="text/javascript" src="js/parse/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="js/parse/site.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

下面是我正在编写的Jquery / Javascript文件的精简版本。我正在处理的部分是“$（”＃dashboard_nav_team_settings“）。点击（函数（事件）”，当我进入这个特定页面时加载。

// global to help with editing ethic bowl objects
var row_data = [];
var rowNumber = 0;
var parseQueryList = [];
var userQueryList = [];
var editRowNumber = 0;
var currentObjectId = '';
var currentUser;
var createTitle;
var createLocation;
var createStartDate;
var createEndDate;
var studentImage = "images/dashboard_page/student.jpg";
var coachImage = "images/dashboard_page/coach.jpg";
var organizerImage = "images/dashboard_page/organizer.jpg";

// some of these ^ may be useless but I didn't want to spend forever deleting them to this snippet

$(function() 
{   
    Parse.$ = jQuery;
    Parse.initialize("KEY", "KEY");

    setUp();

    // <TRIED ALL OF THESE AND NONE WORKED>
    $(".bowlsettingtable").on('click', function(e){
        e.preventDefault();
        alert($(this).closest('td').parent()[0].sectionRowIndex);
    });

    $("table tr").click(function(){
        alert(this.rowIndex);
    });

    $('#dashboard_ethic_bowl_list').find('tr').click( function(){
        alert('You clicked row '+ ($(this).index()+1) );
    });
    // </TRIED ALL OF THESE AND NONE WORKED>

    $('[data-toggle="offcanvas"]').click(function () {
        $('.row-offcanvas').toggleClass('active')
    });

    $("#dashboard_nav_team_settings").click(function(event)
    {
        event.preventDefault();

        //<TEAM SETTINGS PAGE>
        for(var i = 0; i < parseQueryList.length; i++)
        {
            // how to truncate a string
            var title = '';
            title = 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" style="position:relative; display:block; float:right; right: 10px; bottom:5px">Add</button>' +
                        '<p style="position:relative; display:block; float:right; right:20px"><i>Hint:</i> Click on any row to edit/delete it.</p>'+
                    '</div>' +
                    '<div class="panel-body">' +
                        '<div class="col-md-12 table-responsive">' +
                            '<table class="table table-striped table-hover bowlsettingtable">' +
                                '<thead>' +
                                    '<tr>' +
                                    '<th>First Name</th>' +
                                    '<th>Last Name</th>' +
                                    '<th>Role</th>'+
                                    '<th>Email</th>' +
                                    '<th>School</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>' +
                                            '</tr>';
                                        }
                                    }
                                }
                            }                               

                            var ending = '</tbody>' +
                            '</table>' +
                        '</div>' +
                    '</div>' +
                '</div>';

            $('#dashboard_nav_team_settings_content').append(team_settings_content + row + ending);         

            //</TEAM SETTINGS PAGE>
        }
    }); 


    // declare simple log out
    $("#dashboard_log_out").click(function(event) 
    {
        event.preventDefault();
        Parse.User.logOut();
    });


    currentUser = Parse.User.current();
    if (currentUser) 
    {
        // user is logged in
    } 
    else 
    {
        // show the signup or login page
    }
});

function setUp()
{

    // perform a query as the page loads to figure out all the events
    currentUser = Parse.User.current();
    $("#dashboard_home_title_link").text("Ethics Bowls: " + currentUser.get("firstName"));
    var parseID = currentUser.id
    var GameScore = Parse.Object.extend("ethicBowls");
    var query = new Parse.Query(GameScore);
    query.equalTo("userId", parseID);
    query.find({
        success: function(results) 
        {
            // save it for later
            parseQueryList = results;

            // more code down here meant for other things
        },
        error: function(error) 
        {
            alert("Error: " + error.code + " " + error.message);
        }
    });

    var GameScore = Parse.Object.extend("_User");
    var query = new Parse.Query(GameScore);
    query.equalTo("school", currentUser.get('school')); // get all users within the same school as current user
    query.find({
        success: function(users) {
            for (var i = 0; i < users.length; i++) 
            { 
                var object = users[i];
                userQueryList = users;
            }
        },
        error: function(error) 
        {
            alert("Error: " + error.code + " " + error.message);
        }
    });
}

试图彻底但如果我遗漏了一些信息，我很乐意提供帮助。提前感谢您的帮助！

单击动态添加的表行以获取索引号

0 个答案: