jQuery输入字段随表行克隆的增加

Question

I have an issue with a script I'm working on which has a set of columns in a table and 2 inputs field per row.

The first input field is <input type="text" id="code_x" name="code_x" class="form-control" onchange="oncode_changex(this.value)" /> and this one will trigger oncode_changex(this.value) when onchange.

The second input field is <input type="text" id="qte_x" name="qte_x" class="form-control" onkeyup="onqte_changex(this.value)" /> and this one will trigger another function onqte_change(this.value) when onkeyup.

My JQuery script will clone the row and increment it's id's, names and event attributes by 1 everytime a row is added.

The cloning and incrementing works just perfect.

The issue I have is both event attributes are duplicated inside both input fields. Usually the script should increment the onchange inside the "#code_x" and the onkeyup inside the "#qte_x" NOT in both textfields

Here's the Jquery I have :

jQuery.fn.addClone = function() {

return this.each(function() {

    // get row for cloningg
    var row = $(this).parents('tr');
    var parent = {};

    // use tbody or table parent
    if ( $(row).parents('tbody').length>0) {
        parent = $(row).parents('tbody');
    } else {
        parent = $(row).parents('table');
    }

    // inject clone
    var copy = $(row).clone();
    $(copy).addClass('sadey');
    $(copy).addClass('isclone');
    $(parent).append( copy );



    // remove last td and replace with remove html
    $('.sadey').children('td:last').remove();

    var id = ($('.isclone').length + 1);

    $('.sadey').append('<td><button class="btn btn-block btn-danger" id="clickme" onclick="$(this).killClone' + id +'()">Retirer</button></td>');

    // increment all ids and names


    $('.sadey').find('*').each(function() {
    var tempId = $(this).attr('id');
    if (typeof tempId != 'undefined' && tempId!='') {
        $(this).attr('id',tempId  + '_' +  id);
        $(this).attr('onchange','oncode_changex' +  id + "(this.value)");
        $(this).attr('onkeyup','onqte_changex' +  id + "(this.value)");
    }
    var tempName = $(this).attr('name');
    if (typeof tempName != 'undefined' && tempName!='') {
        $(this).attr('name',tempName + '_' + id);
    }
});

    // remove active tag
    $('.sadey').removeClass('sadey');

});

};

and here's HTML :

<tr>
                <td>                    
                    <div class="form-group">
                  <input type="text" id="code_x" name="code_x" class="form-control"  onchange="oncode_changex(this.value)"   />
                </div>

                </td>
                <td>

                    <div class="form-group">
                  <input type="text" name="qte_x" id="qte_x" class="form-control" value="1" onkeyup="onqte_changex(this.value)" />
                </div>

                </td>

                <td colspan="3"><div id="txtHint3_19" style="width: 100%"> </div></td>



                <td><button type="button" class="btn btn-primary btn-sm" onClick="$(this).addClone();">Ajouter un autre article</button></td>
              </tr> 

I am fairly new to JQuery so if anybofdy can explain to me why the events attributes are incrementing, but also duplicating in both textfields.

RESULT once cloned :

<tr class="isclone">

<td>
    <div class="form-group">
        <input id="code_x_2" class="form-control" type="text" onchange="oncode_changex2(this.value)" name="code_x_2" onkeyup="onqte_changex2(this.value)"></input>

</div>

<div class="form-group">
    <input id="qte_x_2" class="form-control" type="text" onkeyup="onqte_changex2(this.value)" value="1" name="qte_x_2" onchange="oncode_changex2(this.value)"></input>

    </div>
</td>
<td colspan="3"></td>
<td></td>

We can see both onkeyup and onchange event in both textfields. They should be separate....

Thank you for your help!

Answer 1

From what I understand, you are indeed setting both attributes on both inputs with :

    $(this).attr('id',tempId  + '_' +  id);
    $(this).attr('onchange','oncode_changex' +  id + "(this.value)");
    $(this).attr('onkeyup','onqte_changex' +  id + "(this.value)");

You may want to check if the input has the attribute before setting it, with something like :

if ($(this).attr('onchange')) {
     $(this).attr('onchange','oncode_changex' +  id + "(this.value)");
 } 

And do the same for the other attribute.