Событие по завершении набора текста MathJax 3 - PullRequest
Новая
       10

Событие по завершении набора текста MathJax 3

0 голосов
/ 10 февраля 2020

Я использую MathJax 3 для рендеринга математических уравнений. Проблема в том, что мне нужно добавить событие щелчка к некоторым символам в математическом уравнении, поэтому я использую \cssId. 


        loader: {
          load: ['[tex]/color','[tex]/cancel'],

        },

        tex: {
          packages: {'[+]': ['cancel']},
          inlineMath: [['$', '$'], ['\\(', '\\)']],
        },
    };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <p id="demo">  ${x^2+4\cssId{someid}{x}+\sum_{s}}$ </p>
    <script>$("#someid").click(function () {
      some code ....
    })
  </script>

Событие щелчка не работает, потому что id = "" еще не создано , Я пытался использовать обещания после набора текста MathJax, как это. 

<script>
$(document).ready(function () {
  MathJax.startup.promise.then(function () {
      $("#someid").click(function () {
  some code ....
})
  })
})

Uncaught TypeError: Невозможно прочитать свойство 'обещание' неопределенного

Я пробовал также MathJax.typesetPromise (). Это тоже не сработало. Заранее спасибо.

1 Ответ

2 голосов
/ 12 февраля 2020

Здесь есть пара вопросов. Во-первых, поскольку сценарий MathJax имеет свойство async, вы не знаете, когда он будет обработан, и это может произойти после вашего вызова $(document).ready(), как это происходит в данном случае (поскольку MathJax.startup isn ' определяется согласно сообщению об ошибке). Во-вторых, $(document).ready() означает только то, что основное содержимое документа было загружено, а не то, что MathJax завершил набор текста (или даже начал его). В вашем случае вы запросили загрузку нескольких расширений TeX, и это заставляет MathJax ждать их поступления, прежде чем начинать набор текста. $(document).ready() будет запущен до того, как они будут загружены, и до того, как произойдет набор текста, и до того, как станет доступен элемент с someid.

Для правильной обработки вам необходимо использовать готовые функции MathJax. вместо. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
 MathJax = {
   loader: {
     load: ['[tex]/color','[tex]/cancel']
   },
   tex: {
     packages: {'[+]': ['cancel', 'color']},
     inlineMath: [['$', '$'], ['\\(', '\\)']]
   },
   startup: {
     pageReady() {
       return MathJax.startup.defaultPageReady().then(function () {
          $("#someid").click(function () {
            alert('clicked!');
          }).css('cursor', 'pointer');
       });
     }
   }
 };
</script>

<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<p id="demo">  ${x^2+4\cssId{someid}{x}+\sum_{s}}$ </p>

Здесь мы используем функцию startup.pageReady() для вызова функции готовности страницы по умолчанию (которая выполняет начальный набор текста) и используем обещание, которое она возвращает для добавления обработчик события click. Это гарантирует, что набор текста произошел, прежде чем сделать это. Я также добавил CSS, чтобы изменить указатель при наведении мыши на интерактивную математику для визуальной индикации того, что щелчок возможен.

...