Question

我有header.jsp个文件

$(document).ready(function() {
    alert("calling in header");
    $(document).on('click', '#get-info-list', function(event) {
        event.preventDefault();
        alert('hiiiiiii');
        $.get('getNotification', function(data) {
            console.log(data);
            $("#infolist").append(data);
        });
    });
});

代码中的某些地方

 <li class="dropdown">
    <span id="info-count"></span>
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list">
        <i class="fa fa-list-alt" ></i>
    </a>
    <ul class="dropdown-menu" id="infolist" role="menu">
    </ul>
</li>

我有一个test.jsp文件，其中我在上面添加了标题div id header.jsp

<div id="header">
   <jsp:include page="/pages/common/header.jsp"/>
</div>

我在test.jsp正在运行header.jsp文件脚本正在执行和显示警告calling in header，但它不是在它下方调用方法。在控制台上也没有打印任何错误。

可能是什么问题？如何解决这个问题??

我问了相关的问题here。它是working properly在同一个文件上。但是在我的系统上，这不起作用。

Answer 1

如果另一个库使用美元符号，如果在$(document).ready()调用后包含该库，它将覆盖它，您可以安全地使用$传递的$(document).ready()参数，如下所示：

jQuery( document ).ready(function( $ ) {
   $(document).on('click', '#get-info-list', function(event) {
            event.preventDefault();
            alert('hiiiiiii');
            $.get('getNotification', function(data) {
                console.log(data);
                $("#infolist").append(data);
            });
        });
});

Answer 2

除非您指定脚本标记，否则不会执行Javascript代码，在header.jsp中的脚本标记内添加js代码。

由于

Answer 3

尝试将Click事件包装在函数中，并将onclick="functionName(event)"添加到get-info-list元素中，看看会发生什么。

JS：

    function clickMe(evt){
        evt.preventDefault();
        alert('hiiiiiii');
        $.get('getNotification', function(data) {
            console.log(data);
            $("#infolist").append(data);
        });
    }

HTML：

<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list" onclick="clickMe(event)">

如果你的代码在同一个文件上工作，那么我猜你是在后面加载html文件/那些元素（例如通过ajax请求），所以所有的绑定都不适用于那些元素，因为它们脚本加载时不存在。

$（文件）.on（＆＃39;点击＆＃39;，....不支持文件包含

3 个答案: