Question

我是初学者，学习jQuery和网络开发，所以这可能是一个愚蠢的问题，但我无法在Google上找到答案（可能我没有找到合适的关键字）。我有一个简单的HTML文件（例如，＆＃39; test.html＆＃39;加载jQuery，我写的外部javascript文件（比如＆＃39; test.js＆＃39;），并且有一个按钮它。例如，

 <html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="scripts/test.js" type="text/javascript"></script>
</head>
    <body>
    <ul class="nav nav-tabs">
                <li role="presentation"><a href="" id="summary_employee">Search by Name</a></li>
              </ul>
    </body>
    </html>

的Javascript

$(document).ready(function() {
    $('#summary_employee').click(function (event) {
        dataString = $("#summary_employee").serialize();
        $.ajax({
            type:"POST",
            url:"<?php echo base_url(); ?>hodm_summary/search_by_employee",
            data:dataString,

            success:function (data) {
                $('#search').html(data);
            }

        });
        event.preventDefault();
    });
});

但是当我点击按钮时，它不起作用。但是，当我把“＆test; j。”中的内容放入＆＃39; test.js＆＃39;代码在＆＃39; test.html＆＃39;然后它工作。

请帮我找到解决方案

Answer 1

由于在DOM中加载HTML标记之前点击是绑定。请在加载dom之后放置您的测试js文件，然后您的点击正确绑定。

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

</head>
    <body>
    <ul class="nav nav-tabs">
                <li role="presentation"><a href="" id="summary_employee">Search by Name</a></li>
              </ul>
      <script src="scripts/test.js" type="text/javascript"></script>
    </body>
    </html>

或者使用事件委托

$(document).on('click', '#summary_employee', function (event) {
     event.preventDefault();
     //Paste your code
});

Answer 2

在test.js中尝试此代码

function getBaseUrl() {
    pathArray = location.href.split( '/' );
    protocol = pathArray[0];
    host = pathArray[2];
    return protocol + '//' + host;
}

$(document).ready(function() {
    $('#summary_employee').click(function (event) {
        dataString = $("#summary_employee").serialize();
        $.ajax({
            type:"POST",
            url: getBaseUrl() + "/hodm_summary/search_by_employee",
            data:dataString,

            success:function (data) {
                $('#search').html(data);
            }

        });
        event.preventDefault();
    });
});

您不能在test.js文件中使用<?php echo base_url(); ?>，因为它是一个PHP脚本。

当包含在单独的文件中时，jQuery click不起作用

2 个答案: