2

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)参数，但我仍然无法让我的 cloned<li>具有悬停效果。我应该怎么办？

谢谢。

4

4 回答 4

2

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

$(".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

演示

于 2012-06-01T18:54:47.647 回答
2

解决方案1：

$(".editable").hover(function() {
    $(this).addClass("editHover");
}, function() {
    $(this).removeClass("editHover");
});
var item = $("#tasks ul li:eq(0)").clone(true); // just change the place 
                                                // of first clone statement
$('#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;
});

演示

解决方案 2：（使用事件委托）

var item = $("#tasks ul li:eq(0)"); // remove clone(true) from here
$('#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;
});
// use event delegation
$("#tasks").on('hover', '.editable', function(e) {
    if (e.type == 'mouseenter') $(this).addClass("editHover");
    else $(this).removeClass("editHover");
});

演示（带事件委托）

于 2012-06-01T18:49:36.873 回答
0

为了不克隆元素两次，您可以clone在第一行中删除一个额外的元素并在委托事件方法中附加处理程序：

var item = $("#tasks ul li:eq(0)");

$("body").on("hover", ".editable", function() {
    $(this).toggleClass("editHover");
}).on("click", "#add", function() {
    var taskItem = item.clone(true).removeClass("editHover");
    $("#tasks ul").append(taskItem);
    taskItem.find(":input:text").val("");
    return false;
}).on("click", ".delete", function() {
    $(this).parent("li").remove();
    return false;
});​

演示：http: //jsfiddle.net/t67yJ/7/

于 2012-06-01T18:50:52.427 回答
0

克隆元素时尚未定义事件侦听器。将 var 移动item = $("#tasks ul li:eq(0)").clone(true);到脚本的末尾。

小提琴

或者使用.on/.live事件委托，您不必克隆侦听器，正如 coder 所说。

于 2012-06-01T18:50:45.790 回答