在 span 标签内应用 onclick 事件

Question

我正在尝试在 span 标记上应用 onclick 事件，但出现以下错误。我想我的做法是正确的。

VM409 twitter-message-73266664:892 Uncaught ReferenceError: clip is not 
defined
at HTMLSpanElement.onclick

跨度标签

<td><span id="bootstrap_css_link" class="badge  btn btn-success bootstrap_css_link" onclick="clip(this.id)" data-clipboard-target="#clipboardExample1">copy</span></td>

夹法

$( document ).ready(function() {
    function clip(clip_id){
        var clipboard = new ClipboardJS(clip_id);
        clipboard.on('success', function(e) {
          setTooltip(e.trigger, 'Copied!');
          hideTooltip(e.trigger);
          //alert("hello");
        });
     } 
});

Answer 1

因为 clip 在函数内部，所以无法从函数外部访问它。删除 document.ready:

function clip(clip_id) {
  var clipboard = new ClipboardJS(clip_id);
  clipboard.on('success', function(e) {
    setTooltip(e.trigger, 'Copied!');
    hideTooltip(e.trigger);
  });
}

Answer 2

clip 函数在全局范围内不可用，因为它是在另一个函数中定义的。您需要找到元素并通过 JavaScript.

附加事件处理程序

$(document).ready(function() {
  $("#bootstrap_css_link").on("click", clip);

  function clip(event) {
    console.log(event.target.id)

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><span id="bootstrap_css_link" class="badge  btn btn-success bootstrap_css_link" data-clipboard-target="#clipboardExample1">copy</span></td>

Answer 3

$( document ).ready(function() {
$('#bootstrap_css_link).click(function () {
var newArray
function clip(clip_id){
var clipboard = new ClipboardJS(clip_id);
clipboard.on('success', function(e) {
  setTooltip(e.trigger, 'Copied!');
hideTooltip(e.trigger);
//alert("hello");
});

 } 
});

});

Answer 4

你必须在 $( document ).ready 之外定义 clip 函数，所以你只需要像这样定义函数

function clip(clip_id){
    var clipboard = new ClipboardJS(clip_id);
    clipboard.on('success', function(e) {
      setTooltip(e.trigger, 'Copied!');
      hideTooltip(e.trigger);
      //alert("hello");
    });
 }

在 span 标签内应用 onclick 事件

Apply onclick event inside a span tag

html

javascript

jquery

clipboard.js