Question

我想在图片<input type="checkbox">中的<li>上放置一个onclick事件。到目前为止我的js代码：它不起作用。

$(document).ready(function() {
    allFiles()
/*----------------------------------------------------------Rechteverwaltung---------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------ALLE USER (Dropdown)------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

$.ajax({
    dataType: 'json', //to parse string into JSON object
    type: 'GET',
    url: 'webAthen/api/users',
    success: function(data){
        //console.log(data);
        $('.userDropdown').html("");

        for(i=0; i < data.length; i++){
           $('.userDropdown').append("<option>" + data[i].userName + "</option>");
        }

    }
});

/*----------User information-LISTENER-------------------*/
    $(document).on("click", ".userDropdown > option", function(){
            $.ajax({
                type: 'GET',
                url: 'webAthen/api/getFileOfUserFile?userName=' + $('.userDropdown').val(),
                success: function (dataRights){
                    dataRights = JSON.parse(dataRights);
                    //Wenn user Rechte hat -> checked, wenn nicht, -> unchecked
                    $.ajax({
                        dataType: 'json', //to parse string into JSON object
                        type: 'GET',
                        url: 'webAthen/api/getAllAthenFiles',
                        success: function(dataAllFiles){
                        //alert(dataRights.length);
                            for(j=0; j < dataAllFiles.length; j++){
                                if(dataRights.length == 0){
                                    document.getElementById(j).checked = false;
                                }
                                for(i=0; i < dataRights.length; i++){
                                    if(dataAllFiles[j].id == dataRights[i].id){
                                        document.getElementById(j).checked = true;
                                        break;
                                    }else{
                                         document.getElementById(j).checked = false;
                                    }
                                }
                            }
                        }
                    });
                }
            });
     });


/*----------Set Rights-LISTENER-------------------*/
    $(document).on("click", "#fileList > li > input", function(){
            alert("Auf ... geklickt!");
            $.ajax({
                type: 'GET',
                url: 'webAthen/api/getFileOfUserFile?userName=' + $('.userDropdown').val(),
                success: function (dataRights){

                }
            });
     });


/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------ALLE FILES (LIST)------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

function allFiles(){

    $.ajax({
        dataType: 'json', //to parse string into JSON object
        type: 'GET',
        url: 'webAthen/api/getAllAthenFiles',
        success: function(data){
            console.log(data);

            for(i=0; i < data.length; i++){
                var checkbox = document.createElement('input');
                checkbox.id = data[i].id;
                checkbox.type = "checkbox";
                checkbox.value=data[i];

                $('#fileList').append("<li>");
                $('#fileList').append(checkbox);
                $('#fileList').append(" ");
                $('#fileList').append(data[i].name);
                $('#fileList').append("</li>");
            }
        }
    });
}

/*--------------multiselect----------*/
/*
$(function () {
            $('#fileDropdown').multiselect({
                includeSelectAllOption: true
            });

});
*/

/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------ALLE Gruppen (Dropdown)---------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

$.ajax({
    dataType: 'json', //to parse string into JSON object
    type: 'GET',
    url: 'webAthen/api/groups',
    success: function(data){
        //console.log(data);
        $('.groupDropdown').html("");

        for(i=0; i < data.length; i++){
           $('.groupDropdown').append("<option>" + data[i].name + "</option>");
        }

    }
});

/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------ALLE Sammlung (Dropdown)-----------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

$.ajax({
    dataType: 'json', //to parse string into JSON object
    type: 'GET',
    url: 'webAthen/api/collections',
    success: function(data){
        //console.log(data);
        $('.collectionsDropdown').html("");

        for(i=0; i < data.length; i++){
           $('.collectionsDropdown').append("<option>" + data[i].name + "</option>");
        }

    }
});
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------------SET RIGHTS USER/FILE -----------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*
// USER FILE ZUORDNEN
 $('#zuordnen').click(function() {
    $.ajax({

        url: 'webAthen/api/addUserToFile?userName=' + $('.userDropdown').val() + "&fileName=" +$('.fileDropdown').val(),
        type: 'GET',
    });
});

// USER FILE ENTFEFRNEN
 $('#entfernen').click(function() {
        $.ajax({
            url: 'webAthen/api/deleteUserFromUserFile?userName=' + $('.userDropdown').val() +  "&fileName=" +$('.fileDropdown').val(),
            type: 'GET',
        });
  });
*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------INFO FILES---------------------------------------------------------------------------------------------------------*/
/*
$('#info').click(function(){
    $.ajax({
            type: 'GET',
            url: 'webAthen/api/getUserOfUserFile?fileName='+$('.file').val(),
            success: function (data){
                data = JSON.parse(data);
                 $('#user').html("User mit Rechten an dieser Datei: ");

                for(i=0; i < data.length; i++){
                   $('#user').append(data[i].userName + ", ");
                }
            }
        });
});
*/

});

			* {
              margin: 0;
              padding: 0;
              -webkit-box-sizing: border-box;
              -moz-box-sizing: border-box;
              box-sizing: border-box;
            }

            html, body {
              background: #f1f1f1;
              /*line-height: 18px;*/
              height: 100%;
              font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
            }

            a {
              text-decoration: none;
              color: #fff;
            }

            #container{
            	height: 100%;
            }

            /*------------------------------------------Header------------------------------------*/

                #navibar ul {
                  list-style: none;
                  margin: 0;
                  padding: 0;
                  overflow: hidden;
                  background-color: #23282d;
                  border-bottom: 5px solid grey;
                }

                #navibar li {
                  float: left;
                }

                #navibar li a {
                  display: block;
                  color: white;
                  text-align: center;
                  padding: 14px 16px;
                  text-decoration: none;
                }

                /*li a:hover:not(.active) {
                  background-color: #111;
                }*/

                #navibar .active {
                  background-color: #4CAF50;
                }

                #navibar ul ul{
                  float: none;
                  position: absolute;
                  text-decoration: none;
                  /*display: none;*/
                  visibility: hidden;
                  max-width: 130px;
                  text-align: left;
                  right: 0px;
                }

                #navibar ul li a:hover{
                  background-color: #00b9eb;
                }

            	/*.verticalMenu .menu .inner a:hover{
            	  color: #00b9eb;
            	}*/

                #navibar ul li:hover > ul{
                  color: black;
                  display: block;
                  position: absolute;
                  opacitiy: 1;
                  visibility: visible;
                  transition-delay: 0.3s;
                  z-index: 999;
                }

            /*-------------------------------------------Linke-Sidebar--------------------------*/

            .btn-menu {
              height: 100%;
              display: block;
              background: #23282d;
            }

            .btn-menu .icon {
              float: right;
            }

            .verticalMenu {
              width: 280px;
              min-width: 230px;
              height: 94.35%;
              display: inline-block;
              /*line-height: 18px;*/
              background: #23282d;
            }

            .verticalMenu .menu {
              width: 100%;
              height: 100%;
            }

            .verticalMenu ul{
              list-style: none;
            }

            .verticalMenu .menu li a{
              color: #fff;
              display: block;
              padding: 15px 20px;
            }

            .verticalMenu .menu .outer a:hover{
              background-color: #00b9eb;
              color: #fff;
            }

            .verticalMenu .menu .inner a:hover{
              color: #00b9eb;
            }

            .verticalMenu .menu .icon{
              font-size: 12px;
              line-height: 18px;
            }

            .verticalMenu .menu .icon.left{
              float: left;
              margin-right: 10px;
              padding-top: 3px;
            }

            .verticalMenu .menu .icon.right{
              float: right;
              margin-left: 10px;
              padding-top: 5px;
            }

            .inner{
                /*display:none;*/
            }

            .verticalMenu .menu ul li a {
              background: #32373c;
              color: #e9e9e9;
            }

            .verticalMenu .menu .active > a{
              background: #1a95d5;
              color: #fff;
            }

    		/*--------------------------------------------------Formular--------------------------------*/
    		#formular{
    			position: absolute;
    			top: 100px;
    			left: 320px;
    			display: flex;  /*float: left scheint nicht zu funktionieren*/
    			flex-wrap: wrap;
    			-webkit-flex-wrap: wrap;
    		}

    		#formular > div {
    		    flex: 1;
    		    margin-left: 20px;
    		    margin-top: 20px;
    		    display: inline-block;
    		}

    		#formular button{
    			border: none;
    			color: white;
    			padding: 15px 32px;
    			text-align: center;
    			text-decoration: none;
    			display: inline-block;
    			font-size: 16px;
    			margin-top: 10px;
    			background-color: #4CAF50;
    			cursor:pointer;
    		}

    		.design {
                padding: 20px;
                background-color: #D0D0D0;
                overflow:auto;
             }

             .innerDiv {
                background-color: #ffffff;
                height: 400px;
                overflow-y: scroll;
             }

            .userDropdown{
               height: 300px;
               width: 300px;
               max-width: 300px;
            }

            ul {
              list-style-type: none;
            }

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>

    <link rel="stylesheet" href="fontawesome-free-5.1.0-web/css/all.css">
    <link rel="stylesheet" href="css/styleRechteverwaltungDatei.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>

</head>
<body>

<div id="container">
    <div id="navibar">
        <ul>
            <a href="index.html"><li style="color: #ffffff ; font-size: 25px; font-weight: bold;"><img src = "Bilder/acropolisW.svg" height="40"/>  webATHEN</li></a>
            <li style="float:right"><a class="active" href=>User <i class="fa fa-caret-down"></i></a>
                <ul>
                    <li><a href="Einstellungen.html">Einstellungen</a></li>
                    <li><a href="Login.html">Ausloggen</a></li>
                </ul>
            </li>
        </ul>
    </div>

    <div class="verticalMenu">
        <!--<a href="" class="btn-menu">Menu<i class="icon fa fa-bars"></i></a>-->
        <ul class="menu">
            <li class="outer"><a href="index.html"><i class="icon left fa fa-tachometer-alt"></i> Dashboard </a></li>
            <li class="outer"><a href="#"><i class="icon left fa fa-copy"></i> Dokumentverwaltung <i class="icon right fa fa-chevron-down"></i></a></li>
            <ul>
                <li class="inner"><a href="DokumentverwaltungDatei.html"><i class="icon left fa fa-file"></i> Datei </a></li>
                <li class="inner"><a href="DokumentverwaltungSammlung.html"><i class="icon left fa fa-folder"></i> Sammlung </a></li>
            </ul>
            <li class="outer"><a href="#"><i class="icon left fa fa-key"></i>Rechteverwaltung <i class="icon right fa fa-chevron-down"></i></a></li>
            <ul>
                <li class="inner"><a href="RechteverwaltungDatei.html"><i class="icon left fa fa-file"></i> Datei</a></li>
                <li class="inner"><a href="RechteverwaltungGruppe.html"><i class="icon left fa fa-users"></i> Gruppe</a></li>
                <li class="inner"><a href="RechteverwaltungSammlung.html"><i class="icon left fa fa-folder-open"></i> Sammlung</a></li>
            </ul>
            <li class="outer"><a href="#"><i class="icon left fa fa-user"></i>Userverwaltung <i class="icon right fa fa-chevron-down"></i></a></li>
            <ul>
                <li class="inner"><a href="UserverwaltungUser.html"><i class="icon left fa fa-user"></i> User</a></li>
                <li class="inner"><a href="UserverwaltungGruppe.html"><i class="icon left fa fa-users"></i> Gruppe</a></li>
                <li class="inner"><a href="UserverwaltungUserGruppe.html"><i class="icon left fa fa-retweet"></i> User <i class="icon left fa fa-arrows-alt-h"></i> Gruppe</a></li>
            </ul>
        </ul>
    </div>

    <div id="formular">


            <div class="design">
                <h4>User:</h4> <br>
                <select class="userDropdown" size="20"></select>


            </div>
            <br><br>
            <div class="design">
                <h4>Files:</h4> <br>
                <div class="innerDiv">
                    <ul id="fileList"></ul>
                </div>
            </div>
           <div class="design">

                <h4>Userrechte einer Datei zuordnen</h4> <br>
                <label>User ausw&auml;hlen:</label>
                <select class="userDropdown"></select>
                <label>Datei ausw&auml;hlen:</label>
                <select class="fileDropdown"></select>
                <br>
                <button id="zuordnen" type="button">Rechte zuordnen</button>

           </div>
            <br>
            <br>
        <!--
          <div class = "design">

                <h4>Userrechte zu einer Datei entfernen</h4> <br>
                <label>User ausw&auml;hlen:</label>
                <select class="userDropdown"></select>
                <label>Datei ausw&auml;hlen:</label>
                <select class="fileDropdown"></select>
                <br>
                <button id="entfernen" type="button">Rechte entfernen</button>

          </div>
            <br><br>
          <div class="design">

                <h4>DateiInformationen</h4> <br>
                <label>Datei ausw&auml;hlen:</label>
                <select class="file"></select>
                <br>
                <p id="user">User mit Rechten an dieser Datei: </p>
                <button id="info" type="button">Info</button>
          </div>-->




    </div>
</div>
</div>
<script src="js/rechteverwaltungDatei.js"></script>
</body>

</html>

Answer 1

$('#fileList').append("<li>");
$('#fileList').append(checkbox);
$('#fileList').append(" ");
$('#fileList').append(data[i].name);
$('#fileList').append("</li>");

append方法将添加 DOM节点，而不是HTML片段。

虽然您可以在此处键入HTML，但它将被转换为DOM节点。

因此，您要将空 li附加到ul，然后将复选框附加到ul ，依此类推上。

由于该复选框最终是ul而非li的子代，因此您的选择器不匹配，因此不会触发委托事件。

您需要根据所构建的DOM树而不是HTML字符串来进行思考。

const $li = $("<li>");
$li.append(checkbox);
$li.append(" " + data[i].name);
$('#fileList').append($li);

列表中复选框上的onclick-event

1 个答案: