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)ことができません。<li>私は何をすべきか？

ありがとう。

4

4 に答える 4

2

Simply move the clone call below the handler like below,

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

于 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

要素のクローンを2回作成しないようにするcloneには、最初の行で余分なものを1つ削除し、委任イベントアプローチでハンドラーをアタッチします。

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

要素を複製するとき、イベント リスナーはまだ定義されていません。varitem = $("#tasks ul li:eq(0)").clone(true);をスクリプトの最後に移動します。

フィドル

または、.on/.liveイベント委任を使用すると、コーダーが言ったように、リスナーを複製する必要がなくなります。

于 2012-06-01T18:50:45.790 に答える