当单独的文件中包含jQuery点击不起作用

-2

我是一个初学者学习jQuery和web开发，所以这可能是一个愚蠢的问题，但我无法在Google上找到答案（可能我没有搜索为正确的关键字）。我有一个简单的HTML文件（例如，'test.html'，它载入jQuery，我写的一个外部JavaScript文件（例如'test.js'），并且有一个按钮。例如，当单独的文件中包含jQuery点击不起作用

<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.js”在“的test.html”代码当时它的工作。

请帮我找到解决方案

来源

2016-12-15 xr33dx

在'body'关闭之前放''script src =“scripts/test.js”type =“text/javascript”> – Mairaj

您是否点击了控制台？ –

你把正确的文件？控制台中的任何错误？ –

Becau在HTML标记加载到DOM之前，点击的结果是绑定的。请将您的测试js文件放在dom加载后，然后点击正确绑定。

<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 
});

来源

2016-12-15 11:06:58

这是行不通的 – xr33dx

我试过活动委托，只刷新页面 – xr33dx

不行不行 – xr33dx

在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脚本。

来源

2016-12-15 11:37:29

当单独的文件中包含jQuery点击不起作用

回答

相关问题