停止传播jquery

时间:2011-12-13 02:22:58

标签: jquery jeditable event-propagation

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

<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

2 个答案:

答案 0 :(得分:1)

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

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

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

答案 1 :(得分:0)

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

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

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