Jquery 选择器在引导模式下不起作用（使用 codeigniter 加载表单）

Question

我正在尝试从所有用户中筛选出一个列表，但我的 jquery 没有选择我的输入值。你能帮我找出我做错了什么吗？谢谢：D

概览：

    // This function gets called in the table -> example run = addStudent(3, "Class name");
function addStudent(class_id, class_name) {
    $(".modal-title").text("Leerling toevoegen aan klas " + class_name);
    $(".modal-body").load("<?= site_url("classes/addStudent/");?>" + class_id); // loads in the form -> see other snippet
    $('#classModal').modal('show');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="classModal" tabindex="-1" role="dialog" aria-labelledby="classModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="classModalLabel">Klassen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

Form(当函数 addStudent 被触发时在概览中加载):

    $("#search").on("keyup", function () {

    document.getElementById("userList").innerHTML = "";

    if ($("#search").val().length > 1) {
        $('#searchlist').css("display", "block");

        $.ajax({
            url: "<?= site_url('Private_Messages/filterUsers'); ?>",
            method: "post",
            data: {
                filter: $("#search").val()
            },
            success: function (result) {
                result = JSON.parse(result);
                for (var i = 0; i < Object.keys(result).length; i++) {
                    var li = document.createElement('li');
                    li.className = "list-group-item";
                    li.innerHTML = '<a class="link" href="<?= site_url('Private_Messages/openChat/'); ?>' + result[i]['id'] + '">' + result[i]['name'] + '</a>';

                        document.getElementById('userList').appendChild(li);
                }
            }
        });

    } else {
        $('#searchlist').css("display", "none");
    }
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Leerling handmatig toevoegen</label>

<div class="float-right">
 <!-- On key up make ajax call to filter all users and put them in the list underneath. -->
    <input id="search" class="form-inline form-control" type="text" placeholder="Naam"/>

    <!-- loaded popover content -->
    <div id="searchlist" style="display: none;">
        <div id="popover-content">
            <ul class="list-group" id="userList">
                <li class="list-group-item"></li>
            </ul>
        </div>
    </div>
</div>

当我在服务器上运行代码时，它只会返回“未定义”日志，或者什么也不做。我不知道如何解决，也许你会。

Answer 1

您的 JS 中有两个错误。 首先，在 JS 中连接字符串时需要使用 + 运算符。

 $(".modal-body").load("<?= site_url(" + classes/addStudent/ + ");?>" + class_id);

其次，您需要转义单引号，因为它们是已经使用单引号的字符串的一部分。

li.innerHTML = '<a class="link" href="<?= site_url(\'Private_Messages/openChat/\'); ?>' + result[i]['id'] + '">' + result[i]['name'] + '</a>';

    // This function gets called in the table -> example run = addStudent(3, "Class name");
    function addStudent(class_id, class_name) {
        $(".modal-title").text("Leerling toevoegen aan klas " + class_name);
        $(".modal-body").load("<?= site_url(" + classes/addStudent/ + ");?>" + class_id); // loads in the form -> see other snippet
        $('#classModal').modal('show');
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Modal -->
<div class="modal fade" id="classModal" tabindex="-1" role="dialog" aria-labelledby="classModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="classModalLabel">Klassen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

    $("#search").on("keyup", function () {

        document.getElementById("userList").innerHTML = "";

        if ($("#search").val().length > 1) {
            $('#searchlist').css("display", "block");

            $.ajax({
                url: "<?= site_url('Private_Messages/filterUsers'); ?>",
                method: "post",
                data: {
                    filter: $("#search").val()
                },
                success: function (result) {
                    result = JSON.parse(result);
                    for (var i = 0; i < Object.keys(result).length; i++) {
                        var li = document.createElement('li');
                        li.className = "list-group-item";
                        li.innerHTML = '<a class="link" href="<?= site_url(\'Private_Messages/openChat/\'); ?>' + result[i]['id'] + '">' + result[i]['name'] + '</a>';

                        document.getElementById('userList').appendChild(li);
                    }
                }
            });

        } else {
            $('#searchlist').css("display", "none");
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Leerling handmatig toevoegen</label>

<div class="float-right">
 <!-- On key up make ajax call to filter all users and put them in the list underneath. -->
    <input id="search" class="form-inline form-control" type="text" placeholder="Naam"/>

    <!-- loaded popover content -->
    <div id="searchlist" style="display: none;">
        <div id="popover-content">
            <ul class="list-group" id="userList">
                <li class="list-group-item"></li>
            </ul>
        </div>
    </div>
</div>