停止传播jquery

Question

我有这段代码，但是当我克隆一个元素时，操作也会被克隆。 中看到问题

<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>

我想要的只是每个元素的单独操作。您可以在演示demo

Answer 1

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

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

...clone().editable('http://save.php', {
            indicator : 'Saving...',
            tooltip   : 'Click to edit...',
            submit    : 'OK',
            cancel : 'Cancelar'
        });

Answer 2

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

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

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