CODEWITHSUNDEEP
jqueryjeditableevent-propagation
user947462
user947462

Reputation: 949

stop propagation jquery

I have this code, but when I clone an element, then the action is also cloned. What i want is just individual actions for each element.You can see the problem in demo

<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

Upvotes: 1

Views: 285

Answers (2)

rkw
rkw

Reputation: 7297

RightSaid is correct, just use .clone() w/o any parameters and it will not clone the handlers/data.

As for your code, I think this is what you were going for: http://jsbin.com/unebex/11/

You have to set the new elements to 'editable' as you create them. There is no need to use .live() on those buttons since you are not creating new instances of those buttons.

Upvotes: 0

RightSaidFred
RightSaidFred

Reputation: 11327

If you don't want to clone data and handlers, use .clone() instead of .clone(true).

If you want the individual cloned element to have the plugin applied, then apply it after you've cloned the element.

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

Upvotes: 1

Related Questions