jQuery动态事件处理程序错误

Question

我为动态创建的 DOM 元素创建了一个事件处理程序，但收到错误消息。我做了一个JSFiddle demo，但这里没有发生错误，只在我的应用程序中发生。

我已经包含了两个事件处理程序，change 和 click。 change 是我唯一关心的：我只包含 click 以确保动态 DOM 元素上的事件处理程序能够正常工作。

如果您不想看演示，这里是基本代码（我正在使用使用.counter() 方法的字和字符计数器插件，您可以在http://qwertypants.github.io/jQuery-Word-and-Character-Counter-Plugin/ 找到）：

<!doctype html>
<html>
<head>
    <script>//plugin</script>
    <script>
        $(document).ready(function() {
            $("#myTextArea").counter();
            //Below, my selector is called myTextArea_count because the plugin creates a <span> with an id
            //equal to the id of the element it is counting for, with "_count" appended.
            $(document).on("change", "#myTextArea_count", function() {
                $("<p>Count changed</p>").appendTo("#myTextArea_counter");
            });
            $(document).on("click", "#myTextArea_count", function () {
                var $this = $(this);
                if ($this.css("color") == "rgb(0, 0, 0)") {
                    $this.css("color", "orange");
                }
                else {
                    $this.css("color", "black");
                }
            });
        });
    </script>
</head>
<body>
    <textarea id="myTextArea" rows="4" cols="50"></textarea>
</body>
</html>

这是我在 Chrome 中很长的重复错误的screenshot。

这是踢球者...

.on("click") 事件在我的应用程序中对我来说很好，而我从$.text() 的扩展手动触发的.on("change") 却不起作用，即使它在JSFiddle。

有谁知道为什么会发生这个错误？

感谢阅读。

Answer 1

JSFiddle 演示

http://jsfiddle.net/nadeemmnn2007/akkvbu0u/4/

工作样本

<!doctype html>
<html>
<head>


</head>
<body>
    <textarea id="myTextArea" rows="4" cols="50"></textarea>


    <script type="text/JavaScript" src="jquery.js"></script>
    <script src="word-and-character-counter.js"></script>
    <script>
        $(document).ready(function() {

            $("#myTextArea").counter({ count: 'up',
    goal: 10});
            //Below, my selector is called myTextArea_count because the plugin creates a <span> with an id
            //equal to the id of the element it is counting for, with "_count" appended.
            $(document).on("change", "#myTextArea_count", function() {
                $("<p>Count changed</p>").appendTo("#myTextArea_counter");
            });
            $(document).on("click", "#myTextArea_count", function () {
                var $this = $(this);
                if ($this.css("color") == "rgb(0, 0, 0)") {
                    $this.css("color", "orange");
                }
                else {
                    $this.css("color", "black");
                }
            });
        });
    </script>



</body>
</html>

注意：我使用https://raw.githubusercontent.com/qwertypants/jQuery-Word-and-Character-Counter-Plugin/master/word-and-character-counter.js插件不是缩小版，chrome控制台也没有错误