Question

我有一些类preview的div。每当具有此类的div的内容发生更改时，我需要在内容已更改的div上调用函数。目前，我的javascript看起来像：

        <script type="text/javascript">

        $(document).on('change', function(){
            var math = document.getElementsByClassName("markdownx-preview");

            console.log("element found");

            MathJax.Hub.Queue(["Typeset",MathJax.Hub,math]);
        });

    </script>

我不知道这种方法是否正确有效，但我可以很容易地看到它适用于整个DOM而不是一组类div。另外，为了获得结果，我需要在textarea外部单击，该更改负责更改内容preview div的内容。

我是javascript / jquery世界的新手，任何提示/帮助实现所需的输出都将受到高度赞赏。

Answer 1

您应该将$(document).on()的第二个参数中的选择器指定为.preview，这将在change上添加div个侦听器，其中包含preview个类。下面是示例，在文本框中写入任何内容，然后在文本框外单击以删除焦点，并让脚本知道div

内发生了更改

＆＃13;

$(document).on('change', '.preview', function(){
  console.log("element found");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='preview'>
 <input type='text' />
</div>

＆＃13;

Answer 2

您定位的是document，而不是正在发生变化的各个元素。

您需要将选择器更改为：

＆＃13;

jQuery('.markdownx-preview').on('change', function() {
  var math = jQuery(this);

  console.log("element found");
  console.log(math.val());

  MathJax.Hub.Queue(["Typeset", MathJax.Hub, math]);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <textarea class="markdownx-preview"></textarea>
  <textarea class="markdownx-preview"></textarea>
  <textarea class="markdownx-preview"></textarea>
</div>

＆＃13;

当您离开textarea时，change事件将会触发。如果您希望在每次按键时触发，请将事件从change更改为keyup。

Answer 3

Mybe使用这样的东西：

$("body").on('DOMSubtreeModified', "mydiv", function() { 
  //magic happens here
});

将mydiv更改为您的。

每次具有类的元素发生更改时调用函数

3 个答案: