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

Posted 2023-05-09

【中文标题】Jquery 选择器在引导模式下不起作用（使用 codeigniter 加载表单）

【英文标题】：Jquery selector isn't working in bootstrap modal (using codeigniter to load in form)

【发布时间】：2019-07-10 23:50:11

【问题描述】：

我正在尝试从所有用户中筛选出一个列表，但我的 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>

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

【参考方案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>

【讨论】：

您好，我更改了您所说的错误代码，但并没有解决问题。 #search 输入没有被我的 Jquery 触发-> $("#search").on("keyup", function () ，我认为我的语法有问题或其他什么。你有什么建议吗？如何解决？谢谢。

返回的 JSON 是什么？我无法运行您的 ajax 调用，因为它是您的本地变量。

没什么，它没有被触发，因为 Jquery 选择器（ $("#search").on("keyup", function () ）不工作。我通过记录测试了这个'hi' 在 keyup 之后，但它没有被记录。