问题描述

用$('<textarea>')创建的对象没有click事件

我想实现的功能是按下option + enter键新建一个标签，给它加上一个类名叫做'dictation_line'，把这个标签插到原有的后面，然后只要点击到类名是'dictation_line'的对象就将原来的current_line去掉这个类名，给点击到的对象加上‘current_line'。

'''html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Dictation</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="keypress.js"></script>
</head>

<body>
<textarea class = "dictation_line current_line"></textarea>
</html>
'''

'''Javascript
var main = function(){
$('.dictation_line').click(function(){
    $('.current_line').removeClass('current_line');
    $(this).addClass('current_line');
});

var listener = new window.keypress.Listener();

listener.simple_combo("option enter",function(){
    var newline = $('<textarea class = "dictation_line"></textarea>');
    newline.insertAfter($('.current_line').removeClass('current_line')).addClass('current_line').focus();
});

}

$(document).ready(main);

'''

现在的问题就是可以新建但是通过jquery创建的dictation_line没有反应，我用Safari检查发现一开始写在html文件里面的那个dictation_line的事件监听里有click，但是后面添加的就没有。这是为什么？$('.dictation_line')不是应该可以选中所有类名是‘dictation_line'的标签吗？

这个问题应该怎么解决，实现我想要的效果呢？