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 определен внутри 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

вместо этого. Кроме того, наличие нескольких идентификаторов в одном документе является недействительным HTML; добавление

<span id="categoryBubble" 

несколько раз (если это возможно, учитывая другой код, который у вас может быть) будет недействительным. Попробуйте вместо этого использовать класс.

<span class="categoryBubble"

Если вы действительно хотите добавить диапазон несколько раз и хотите щелкнуть созданный диапазон, чтобы удалить categoryBubble, связанный с этим диапазоном, тогда селектор идентификаторов работать не будет - вместо этого вы можете ссылаться на диапазон созданный ранее в замыкании, и скрыть его:

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

Answer 2

Foo() (которая не является функцией конструктора, поэтому ее не следует называть, начиная с заглавной буквы), локально ограничивается анонимной функцией, которую вы передаете готовому.

Затем onclickОбработчик событий ищет что-то с именем Foo, он не может найти его, потому что он находится за пределами нужной области.

Не используйте встроенные атрибуты события , у них есть всевиды неприятных проблем, одна из которых заключается в том, что вы вынуждены использовать с ними глобальные переменные.

Создайте свой HTML-код с помощью функций jQuery вместо того, чтобы смешивать строки.Свяжите свой обработчик событий с помощью метода 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();
    }
  });
});