Как вызвать глобальную функцию в контекстном меню - PullRequest
Новая
       25

Как вызвать глобальную функцию в контекстном меню

0 голосов
/ 31 января 2019

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

Я создалПользовательское контекстное меню с тремя вариантами. Я пытаюсь сделать так, чтобы кто-то нажимал на один из вариантов («Добавить в избранное»), и он делал то же самое, что я описал выше. Проще говоря, я не знаю, каквызвать функцию, потому что она выходит за рамки оригинальной функции избранного.Я пытался сгруппировать функциональность избранного в его собственной функции и ссылаться на нее, но что-то не так с моим синтаксисом (или я был далеко и не двигался в правильном направлении?).Любые мысли?

JS добавить избранное функции: 

function faveFunc(evt) {
  const $table = $("#km-table-id")

  let table = $table.DataTable();
  let favesArr = [];

      let data = table.row(this.parentNode).data(),
      checked = $(this).is(":checked"),
      dataIndex = favesArr.indexOf(data);
      if (checked) {
        if (dataIndex === -1) {
          favesArr.push(data); // add item
        }
      } else {
        if (dataIndex > -1) {
          favesArr.splice(dataIndex, 1); // remove item
        }
      }  


      // - Appending selected faves to div - //

      ($(".populate-faves").empty()); // removes all previous entries
      for (var i = 0; i < favesArr.length; i++) {
        $(".populate-faves").append(JSON.stringify(favesArr[i].Titles) + '<br/><br/>').addClass("faved-doc");  
      }


    }; // ------------ faveFunc

    $("#km-table-id.checkbox-class, [data-action='add']").on("click", faveFunc)


  console.log(faveFunc)

Контекстное меню: 

  ///// Show menu /////
  $(document).on("contextmenu", function(evt) {
      evt.preventDefault();
    $(".custom-menu")
    .show()
    .css({ top: evt.pageY, left: evt.pageX });

    ///// Close menu /////
    $(document).on("mousedown", function(evt) {
      if (!$(evt.target).parents(".custom-menu").length > 0) {
        $(".custom-menu").hide(100);
      }
    })
  });

Фрагмент HTML: 

<ul class="custom-menu">
  <li data-action="open">Open Document</li>
  <li data-action="add" oncontextmenu="()">Set As Favorite</li>
  <li data-action="email"><a href="mailto:?subject=subject">Email Document</a></li>
</ul>

1 Ответ

0 голосов
/ 31 января 2019

faveFunc только устанавливает слушателя

Давайте посмотрим на faveFunc: 

function faveFunc() {
    let addFave = $table.on("click", ".checkbox-class", function(e) {
        // ...
    })
}

Когда вы звоните faveFunc, все, что он делает, установленослушатель "щелчка".На самом деле не выполняет прослушиватель щелчков.

document не то, что вы думаете

Относительно $(document).on("contextmenu") и $(document).on("click"): document - это глобальная переменная на веб-страницах, которая ссылается на саму веб-страницу.Это не относится ни к какому содержанию веб-страницы.Эти события будут срабатывать, когда вы щелкаете или щелкаете правой кнопкой мыши в любом месте на странице.

Будьте последовательны в том, как вы устанавливаете прослушиватели событий.

В настоящее время вы делаете это три разныхспособы:

  • $(selector).on("click")
  • $(selector).click()
  • $(selector).on("click", filter)

Выберите один.Лично я предпочитаю $(selector).on("click").

Превратить обработчик событий в именованную функцию

Вместо этого: 

function faveFunc() {
    let addFave = $table.on("click", ".checkbox-class", function(e) {
        // ...
    })
}

...Я бы сделал это: 

function faveFunc(e){
    // ...
}
$("#km-table-id.checkbox-class").on("click", faveFunc)

Таким образом, вы можете повторно использовать обработчик событий faveFunc: 

function faveFunc(e){
    // ...
}
$("#km-table-id.checkbox-class").on("click", faveFunc)
$("[data-action='add']").on("click", faveFunc)

Вы также можете объединить их в одну функцию, так как jQuery поддерживаетCSS ,: 

$("#km-table-id.checkbox-class, [data-action='add']").on("click", faveFunc)
...