jQuery: onClick 未定义？

Question

我在使用 onclick 时遇到问题，特别是在下面的代码中看到的 onclick="Foo()"。单击时，我变得不确定，但我已将函数包含在顶部甚至函数之外。

$( document ).ready(function() {
    function Foo() {
        console.log('clicky click click');
        document.getElementById('categoryBubble').style.display = 'none';
    }
    $('.mutliSelect select').on('change', function() {
        var title = $(this).closest('.mutliSelect').find('option').val();
        title = $(this).val() + "";
        if ($(this).is(':selected')) {
            // the code for if goes here
        } else {
            console.log('im working here #2');
            var html = '<span id="categoryBubble" title="' + title + '">' + title + '</span>' + '<span onclick="Foo()" class="Xout">x</span>';
            $('.multiSel').append(html);
            $(".hida").hide();
        }
    });
});

Answer 1

Foo()（它不是构造函数，因此不应以大写字母开头命名）在局部范围内限定为您传递给 ready 的匿名函数。

然后 onclick 事件处理程序开始寻找名为 Foo 的东西，它找不到它，因为它不在正确的范围内。

不要使用内在事件属性，它们有各种讨厌的问题，其中之一是您几乎被迫对它们使用全局变量。

使用 jQuery 函数生成 HTML，而不是将字符串混合在一起。使用 jQuery on 方法而不是 onclick 属性绑定您的事件处理程序。

$(function() {
  function foo() {
    console.log("clicky click click");
    document.getElementById("categoryBubble").style.display = "none";
  }

  $(".mutliSelect select").on("change", function() {
    var title = $(this)
      .closest(".mutliSelect")
      .find("option")
      .val();

    title = $(this).val() + "";

    if ($(this).is(":selected")) {
      // the code for if goes here
    } else {
      console.log("im working here #2");

      var span = $("<span />")
        .attr("id", "categoryBubble")
        .attr("title", title)
        .text(title);

      var other_span = $("<span />")
        .on("click", foo)
        .addClass("Xout")
        .text("x");

      $(".multiSel").append(span);
      $(".multiSel").append(other_span);

      $(".hida").hide();
    }
  });
});

Answer 2

您的 foo 定义在内部 document).ready - 它不在顶层，因此当内联处理程序试图找到名为的全局函数时Foo调用失败

要么把Foo放在外面：

function Foo() {
  console.log('clicky click click');
  document.getElementById('categoryBubble').style.display = 'none';
}

$( document ).ready(function() {
  // ...

或者，更好的是，完全避免内联处理程序，而是使用 Javascript 正确附加侦听器，从而允许您在当前范围内引用其他变量和函数：

const span1 = $('<span></span>')
  .prop({
    id: 'categoryBubble',
    title
  })
  .text(title);
const span2 = $('<span></span>')
  .prop('class', 'xOut')
  .on('click', Foo);
$('.multiSel').append(span, span2);

另请注意，在 jQuery 的现代版本中，您可以使用

而不是 $( document ).ready()

$(() => {
  // code here

相反。此外，在单个文档中具有多个 ID 是无效的 HTML；追加

<span id="categoryBubble"

多次（如果有可能，考虑到您可能拥有的其他代码）将无效。考虑改用 class。

<span class="categoryBubble"

如果您确实想要多次附加一个跨度，并且想要单击创建的跨度以删除与该跨度关联的 categoryBubble，那么 ID 选择器将不起作用 - 相反，您可以引用之前在闭包中创建的跨度，并隐藏它：

const span2 = $('<span></span>')
  .prop('class', 'xOut')
  .on('click', () => {
    span1.hide();
  });

jQuery: onClick 未定义？

jQuery: onClick Undefined?

javascript

jquery

onclick

undefined