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

解决方案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;
});

<强> DEMO

解决方案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");
});

<强> DEMO (with event delegation)

Answer 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

DEMO

Answer 3

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

<强> Fiddle

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

Answer 4

为了不再克隆元素两次，您可以在第一行中删除一个额外的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;
});

DEMO： http://jsfiddle.net/t67yJ/7/

用悬停事件克隆元素？

4 个答案:

解决方案1：

解决方案2 :(使用事件委托）