Jquery keyup 事件未触发

Question

我正在尝试使用 JQuery 在我页面的搜索字段中创建处理 keyup 事件。然而，事件没有被触发，我在控制台中没有看到任何东西。

搜索字段

<li>
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">&#128269;</span>
        <input type="search" class="form-control" placeholder="Search" aria-describedby="basic-addon1">
    </div>
</li>

Answer 1

jQuery 事件正在为我触发，它工作正常。如果这是你想要的？ :P

Answer 2

我认为是JQuery版本问题；低于 1.7.0 .on() 功能不存在您可以试试这个工作片段；

$('input[type=search]').keyup(function () {
    var query = $(this).val().toLowerCase();
    console.log(query);
    $('li.file').each(function (index, element) {
        var name = $(element).text().toLowerCase();
        if (name.indexOf(query) >= 0) {
            $(this).removeClass('hidden');
        } else {
            $(this).addClass('hidden');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search">

$('input[type=search]').keyup(function () {
    var query = $(this).val().toLowerCase();
    console.log(query);
    $('li.file').each(function (index, element) {
        var name = $(element).text().toLowerCase();
        if (name.indexOf(query) >= 0) {
            $(this).removeClass('hidden');
        } else {
            $(this).addClass('hidden');
        }
    });
});


$('.modal-footer').on('click touchend', function () {
    $('#maximumTabsModal').modal('hide');
});

$('.file').on('click touchend', function (e) {
    e.preventDefault();
    if ($(this).hasClass('disabled'))
        return;
    var path = $(this).data('path').replace("\\", "http://" ).replace("PDFs","Uploads");
    var name = $(this).data('name');
    var lastname = $(this).data('lastname');
    name = name.length > 9 ?
        name.substring(0, 6) + '...' :
        name.substring(0, 9);
    lastname = lastname.length > 9 ?
        lastname.substring(0, 6) + '...' :
        lastname.substring(0, 9);
    var tabCount = $('#tabs li').size();
    $(this).attr('data-position', tabCount);
    if (tabCount === 0) {
        $('#toc').after('<div class="content"><ul class="nav nav-tabs" role="tablist" id="tabs"></ul><div class="tab-content"></div></div>');
    }
    if (tabCount === 5) {
        $('#maximumTabsModal').modal('show');
        $('.start-button').removeClass('active');
    } else {
        $(this).addClass('disabled')
        $('<li role="presentation" data-position="' + tabCount + '"><a href="#panel' + tabCount + '" aria-controls="panel"' + tabCount + ' role="tab" data-toggle="tab">' + name + '<span class="close"></span><br/>' + lastname + '</a></li>').appendTo('#tabs');
        $('<div class="tab-pane" id="panel' + tabCount + '"><div id="pdf' + tabCount + '" class="pdf"></div></div>').appendTo('.tab-content');
        $('#tabs a:last').tab('show');
        var options = {
            pdfOpenParams: {
                view: "FitV"
            },
            forcePDFJS: true,
            PDFJS_URL: "pdfjs/web/viewer.html"
        };
        var pdf = PDFObject.embed(path, '#pdf' + tabCount, options);
        $('#exd-logo').hide();
    }
});

$(document).ready(function () {
    $(document).on('click touchend', 'span.close', function (e) {
        e.preventDefault();
        var tab = $(this).closest('li');
        var position = tab.data('position');
        tab.remove();
        $('#panel' + position).remove();
        $('#tabs a:last').tab('show');
        var tabCount = $('#tabs li').size();
        if (tabCount === 0) {
            $('.content').remove();
            $('#exd-logo').show();
            $('#get-started').show();
            $('#exd-logo').removeClass('inactive');
        }
        var parent = $(this).parent().parent();
        var position = $(parent).data('position');
        var file = $('li.file[data-position=' + position + ']').first();
        $(file).removeClass('disabled');
    });
    $(document).on('click touchend', '.tab-content', function () {
        var display = $('#toc').css('display');
        if (display === 'block') {
            $('ul#toc').toggle('slide', { direction: 'left' }, "slow");
            $('.start-button').removeClass('active');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<li>
    <div class="input-group">
        <span class="input-group-addon" id="basic-addon1">&#128269;</span>
        <input type="search" class="form-control" placeholder="Search" aria-describedby="basic-addon1">
    </div>
</li>

Answer 3

我检查你这边的样品都运行找到了。尝试用类似以下内容替换您的代码：

  $(function(){
    $('input[type=search]').keyup(function () {
        var query = $(this).val().toLowerCase();
        console.log(query);
        $('li.file').each(function (index, element) {
            var name = $(element).text().toLowerCase();
            if (name.indexOf(query) >= 0) {
                $(this).removeClass('hidden');
            } else {
                $(this).addClass('hidden');
            }
        });
    });
    });

确保在 DOM 准备就绪时调用您的函数

Jquery keyup 事件未触发

Jquery keyup event not firing

javascript

jquery

onkeyup

keyup

jquery-events

相关Javascript

搜索字段