Question

我有一个表格行，我添加了使用.clone和.remove

添加/删除的功能

我还在代码点火器中对我的控制器进行了ajax调用，以获取数据并根据数据填充其他输入。

它目前在第一个工作，我可以从下拉列表中选择一个选项，它填充相邻输入的值。我的问题是，当我点击添加并成功克隆该行时，当我更改该下拉列表时，它就像.change和.ajax事件不再有效。

这是我的jQuery，我想我遇到了问题：

$('.invoice_line_item').each(function(){
    $(this).change(function(){

        var table = $(this).closest('.tr_clone');

        var select_value = $(this).val();
        //alert(item_id + ' ' + select_value);
        console.log(item_id + select_value);

         $.ajax({
            url: '<?php echo site_url("Invoice_item/get_item"); ?>',
            type: 'POST',
            dataType: "JSON",
            data: ({'id' : select_value}),
            success: function (data, status)
            {
                //alert('Success ' + data);
                console.log(data);
                $(table).find('.description').val(data['work_description']);
                $(table).find('.amount').val(data['amount']);
                $(table).find('.quantity').val(data['quantity']);
                $(table).find('.price').val(data['amount']);
            },
            error: function (data, xhr, desc, err)
            {
                alert('An Error Occurred: ' + xhr + ' ' + desc + ' ' + err);
                console.log(data);
            }
        }); 
    });
});

这是HTML：

<tbody>
  <tr class="tr_clone" id="inv_line_1">
    <td>
        <select id="line_item_1" name="invoice_line_item" class="invoice_line_item">
            <option></option>
            <?php
    foreach($prefix_line_items as $line_item)
    {
        ?>
        <option value="<?php echo $line_item['id']; ?>"><?php echo $line_item['item']; ?></option>
        <?php
    }
    ?>
        </select>
    </td>
    <td><input type="text" id="description_1" name="description" class="description" value="" /></td>
    <td><input type="currency" id="amount_1" name="amount" class="amount" value="" /></td>
    <td><input type="number" id="quantity_1" name="quantity" class="quantity" value="" /></td>
    <td><input type="currency" id="price_1" name="price" class="price" value=""  readonly/></td>
    <td><a href="#" onclick="return false;" class="add-line-item"><i class="fa fa-plus"></i></a>   <a href="#" onclick="return false;" class="remove-line-item"><i class="fa fa-minus"></i></a></td>
  </tr>
</tbody>

控制台中没有错误，第一次为第一行工作，但是当我单击Add按钮并且它复制了行时，我更改了（克隆的）select元素，它就像jQuery不再触发所以它没有抓住数据通过ajax或打印到控制台。

Answer 1

在克隆元素时，默认情况下，它不会将事件处理程序复制到新元素。为此，你必须传递true告诉clone方法这样做。好的做法是克隆元素，然后手动将所需事件复制到新元素。

检查下面jquery网站上给出的例子，

/ Original element with attached data
var $elem = $( "#elem" ).data( "arr": [ 1 ] ),
    $clone = $elem.clone( true )

希望有所帮助......

对多个选择使用ajax选择更改

1 个答案: