Question

我试图通过单击范围来执行函数，但是它告诉我它是未定义的。

$(document).ready(function() {
  function callTo(param) {
    alert(param);
  }
});

.file-up {
  background: #f5f5f5 none repeat scroll 0 0;
  border: 1px solid #ccc;
  color: #383f45;
  font-size: 12px;
  margin-bottom: 10px;
  padding: 6px;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}

<div>
  <span class="file-up" onclick="callTo('test')">Click to call</span>
</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

尝试将函数定义从$（documents.ready）移开

<script>
    function callTo(param) {
        alert(param);
    }
</script>

或定义事件监听器，如

<script>
    $(document).ready(function() {
        $('.file-up').click(function() {
            //action
        });
    });
</script>

（在这种情况下，我最好为其指定一个ID，并将选择器更改为#id而不是.file-up，因为其他元素可以应用相同的类）

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title>
        sample
    </title>
</head>
<body>
    <script>
        function callTo(param) {
            alert(param);
        }
    </script>
    <div>
        <span class="file-up" id="index" onclick="callTo('test')">
            Click to call
        </span>
    </div>
</body>

这是一个不使用jQuery的有效示例，仅使用普通javascript。插入并直接使用。如果您要我发布仅使用jQuery的答案来完成您要完成的任务，请告诉我。

根据您的要求，这是使用jQuery的代码-

<!DOCTYPE html>
<html>
<head>
    <title>
        sample
    </title>
</head>
<body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(document).ready(function() {
      $('#index').click (function callTo() {
        alert("Your values is :"+ $(this).data("value"));
      });
    });
</script>
<div>
    <span class="file-up" id="index" data-value="test">
        Click to call
    </span>
</div>

如何使用onclick正确执行功能JS？

2 个答案: