jquery - 使用悬停事件克隆元素？

Question

HTML:

<div id='task-header'>
</div>
<div id='tasks'>
    <a href="#" id ="add">Add</a>
  <ul>
    <li class ="editable">
      <form class='task'>
        <input class='textfield' type='text' />
      </form>
        <a href="#" class="delete">Delete this row</a>
    </li>
  </ul>
</div>
<div id='task-footer'></div>

jQuery:

var item = $("#tasks ul li:eq(0)").clone(true); // need to clone for new add
$('#add').click(function() {
    var taskItem = item.clone(true);
    $('#tasks ul').append(taskItem);
    taskItem.find(':input:text').val("");
    return false;
});

$('body').on('click', '.delete', function() {
    $(this).parent('li').remove();
    return false;
});

$(".editable").hover(function() {
    $(this).addClass("editHover");
}, function() {
    $(this).removeClass("editHover");
});​

JSFiddle: http://jsfiddle.net/t67yJ/

我设置了我的clone(true)参数，但我仍然无法获取我的克隆 <li>具有悬停效果。我该怎么办？

谢谢。

Answer 1

只需将克隆调用移至处理程序下方，如下所示，

$(".editable").hover(function() {
    $(this).addClass("editHover");
}, function() {
    $(this).removeClass("editHover");
});

var item = $("#tasks ul li:eq(0)").clone(true); // need to clone for new add

DEMO