Question

我遇到了一个我正在处理的脚本的问题，该脚本在表中有一组列，每行有2个输入字段。

第一个输入字段是<input type="text" id="code_x" name="code_x" class="form-control" onchange="oncode_changex(this.value)" />，这个字段在onchange时会触发oncode_changex（this.value）。

第二个输入字段是<input type="text" id="qte_x" name="qte_x" class="form-control" onkeyup="onqte_changex(this.value)" />，当onkeyup时，这个字段将触发另一个函数onqte_change（this.value）。

我的JQuery脚本将克隆该行，并在每次添加行时将其id，名称和事件属性递增1。

克隆和递增工作非常完美。

我遇到的问题是两个输入字段内都重复了两个事件属性。通常，脚本应该增加“#code_x”内的onchange和“#qte_x”内的onkeyup，而不是在两个文本域中

这是我的Jquery：

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');

});

};

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

我是JQuery的新手，所以如果anybofdy可以向我解释为什么事件属性正在递增，而且在两个文本字段中都会重复。

结果克隆一次：

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

我们可以在两个文本字段中看到onkeyup和onchange事件。它们应该是分开的......

感谢您的帮助！

Answer 1

据我所知，您确实在两个输入上设置了两个属性：

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

您可能需要在设置之前检查输入是否具有该属性，例如：

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

对其他属性也这样做。

Jquery输入字段以表行克隆

1 个答案: