javascript - Jquery 克隆和更新按钮图标

Question

我觉得我在这里忽略了一些非常简单的东西。我需要另一双眼睛。我在这方面花费的时间比我应该的要多得多。

看看这个小提琴 => http://jsfiddle.net/R8SxU/

为什么添加一年多后图标不更新？我希望顶部的始终是一个加号，象征着增加新的一年，而下面的其余的是一个减号来删除。它适用于第一个，但仅适用于第一个。我相信我有正确的选择器，因为每个按钮都正确激活了功能（控制台输出）。

HTML

<div>
    <label for="year-0">Enter Year</label>
    <input id="year-0" type="number" title="Enter Year"/>
    <button id="addYear" title="Add Year">Year</button>
</div>

jQuery

$('#addYear')
    .button({icons: { primary: 'ui-icon-circle-plus' } })
    .on('click', function() { 
        var clone      = $('div').first().clone(true),
            peroid     = $('div').length;

        //update ID
        $(clone).find('label').prop('for','year-' + peroid);
        $(clone).find('input').prop('id','year-' + peroid);

        $('div:first button')
            .prop('id','')
            .attr('title','Remove Year')
            .addClass('removeYear');


        $(clone).insertBefore('div:first');
        $('.removeYear:first')
             .off('click')
             .button({ icons: { primary: 'ui-icon-circle-minus' } })  // Why Wont This Work
             .on('click', function() { console.log('remove function');  });

    });

Answer 1

尝试以下操作：

$('#addYear').button({
    icons: {
        primary: 'ui-icon-circle-plus'
    }
}).on('click', function () {
    var clone = $(this).parent().clone(),
        peroid = $('div').length;

    clone.find('label').prop('for', 'year-' + peroid).end()
         .find('input').prop('id', 'year-' + peroid).end()
         .find('button').prop('id', 'id' + peroid).prop('title', 'Remove Year')
         .addClass('removeYear').find('span:first').addClass('ui-icon-circle-minus');

    clone.insertAfter('div:last');
});

$(document).on('click', 'div:not(":first") button', function () {
    $(this).closest('div').remove();
});

http://jsfiddle.net/Y33GV/

Answer 2

试试这个：- http://jsfiddle.net/aidioo7/R8SxU/4/

var clone = $('div').last().clone(true),
         peroid = $('div').length;

代替

var clone=$('div').first().clone(true),
            peroid=$('div').length;