1

我有这段代码,但是当我克隆一个元素时,动作也会被克隆。我想要的只是每个元素的单独操作。您可以在演示中看到问题

<script type="text/javascript">
$(document).ready(function() {
    $('.edit').editable('http://save.php', {
        indicator : 'Saving...',
        submit    : 'OK',
        cancel : 'Cancelar',
    }); 
});


$(document).ready(function () {
    $('#btnAdd').live('click', function(){
        var num = $('.clonedInput').length;
        var newNum = new Number(num + 1);

        var newElem = $('#input' + num).clone(true).prop('id', 'input' + newNum);

        newElem.children(':text').prop('name', "myformdata[job][]").prop('job', 'job').val('');

        $('#input' + num).after(newElem);
        $('#btnDel').prop('disabled', '');

        if (newNum == 4) $('#btnAdd').prop('disabled', 'disabled');

    });

    $('#btnDel').live('click', function(){
        var num = $('.clonedInput').length;

        $('#input' + num).remove();
        $('#btnAdd').prop('disabled', '');

        if (num - 1 == 1) $('#btnDel').prop('disabled', 'disabled');

    });

    $('#btnDel').prop('disabled', 'disabled');

});
</script>

    <div class="clonedInput" id="input1">
        <span style="float: left;">job</span>
        <div class="edit" id="job="myformdata[job][]">Job</div>
    </div>

    <div id="copy">
        <input class="format" type="button" id="btnAdd" value="Ad" />
        <input class="format" type="button" id="btnDel" value="Re" />
    </div>

演示

4

2 回答 2

1

如果您不想克隆数据和处理程序,请使用.clone()而不是.clone(true).

如果您希望单个克隆元素应用插件,请在克隆元素后应用它。

...clone().editable('http://save.php', {
            indicator : 'Saving...',
            tooltip   : 'Click to edit...',
            submit    : 'OK',
            cancel : 'Cancelar'
        });
于 2011-12-13T02:25:33.487 回答
0

RightSaid 是正确的,只需使用 .clone() 不带任何参数,它不会克隆处理程序/数据。

至于你的代码,我认为这就是你想要的:http: //jsbin.com/unebex/11/

您必须在创建新元素时将它们设置为“可编辑”。无需在这些按钮上使用 .live() ,因为您没有创建这些按钮的新实例。

于 2011-12-13T03:50:07.487 回答