引入外部user.js文件后函数无法在index.php中调用的技术求助

这种情况我之前也碰到好几次，大概率是下面几个常见原因导致的，咱们逐个排查：

1. jQuery加载顺序不对 #

你的user.js里用到了$（jQuery的简写），如果jQuery的引入是在user.js之后，那浏览器加载user.js的时候，$还没定义，函数自然没法正常工作。

解决办法：把jQuery的<script>标签放在user.js引入的前面：

<!-- 先加载jQuery -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- 再加载你的user.js -->
<script src="js/user.js" type="text/javascript"></script>

2. this指向错误导致找不到DOM元素 #

看你deletemessage函数里用了$(this).parent().parent()，如果调用这个函数的方式不对，this不会指向你点击的那个元素（比如按钮），反而可能指向window对象，这样parent()就找不到正确的父元素了。

举个例子，如果你是用onclick="deletemessage(id)"这种方式调用，this就是window，自然出问题。

解决办法：

• 推荐用事件委托绑定事件，在user.js里这么写：

  // 等DOM加载完成后绑定
  $(document).ready(function(){
      // 给所有带.delete-btn类的按钮绑定点击事件
      $(document).on('click', '.delete-btn', function(){
          var id = $(this).data('id'); // 从按钮的data-id属性拿id
          var parent = $(this).parent().parent();
          
          $.ajax({
              type: 'get',
              url: 'Save.php?i=' + id,
              // 这里可以加成功/失败的回调
              success: function(response){
                  // 比如删除成功后移除对应的DOM元素
                  parent.remove();
              }
          });
      });
  });
  

  然后HTML里的按钮改成：

  <button class="delete-btn" data-id="要删除的ID">删除</button>
  

• 如果一定要用onclick，记得把this传进去：

  <button onclick="deletemessage(要删除的ID, this)">删除</button>
  

  然后函数修改为：

  function deletemessage(id, elem) {
      var parent = $(elem).parent().parent();
      $.ajax({
          type: 'get',
          url: 'Save.php?i=' + id,
          // 其他配置
      });
  }
  

3. 外部JS文件路径错误 #

浏览器可能没成功加载user.js，你可以按F12打开开发者工具，切换到Network标签，刷新页面后看user.js的请求状态，如果是404，说明路径写错了。

比如如果你的index.php在根目录，user.js在js文件夹，路径是对的；但如果index.php在子目录（比如admin/index.php），那路径应该改成../js/user.js。

4. 函数被包裹在闭包里导致全局访问不到 #

如果你的deletemessage函数是写在$(function(){...})或者其他闭包里面，那全局作用域（比如HTML的onclick）是访问不到这个函数的，比如：

$(function(){
    // 这个函数只能在闭包里访问，外部调用不到
    function deletemessage(id) {
        // ...
    }
});

解决办法：把函数暴露到全局作用域，比如：

// 把函数挂载到window对象上，全局就能访问了
window.deletemessage = function(id) {
    var parent = $(this).parent().parent();
    $.ajax({
        type: 'get',
        url: 'Save.php?i=' + id,
        // ...
    });
};

或者直接把函数写在闭包外面，不过更推荐用前面说的事件委托方式。

内容的提问来源于stack exchange，提问作者Maj.jad