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

Question

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

看看这个 fiddle => 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>

查询

$('#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/