Question

$(document).on('keydown', '.lst', function (e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 13) {
        html = '<tr>';
        html += '<td>' + i + '</td>';
        html += '<td><select class="inputs form-control selectpicker prd" data-live-search="true" name="code_' + i + '" id="code_' + i + '"></select></td>';
        html += '<td><input type="text" class="inputs form-control" name="price_' + i + '" id="price_' + i + '" /></td>';
        html += '<td><input type="text" class="inputs form-control" name="qty_' + i + '" id="qty_' + i + '" /></td>';
        html += '<td><input type="text" class="inputs form-control" name="disc_' + i + '" id="disc_' + i + '" /></td>';
        html += '<td><input type="text" class="inputs form-control" name="tax_' + i + '" id="tax_' + i + '" /></td>';
        html += '<td><input type="text" class="inputs form-control lst" name="total_' + i + '" id="total_' + i + '" /></td>';
        html += '</tr>';
        $('table').append(html);

             $.ajax({    
                            type: "post",
                            url: "pages/get_products.php", 
                            data: html,
                            dataType: "html",   //expect html to be returned                
                            success: function(response){                    
                                $('#code_' + i).html(response); 
                            }
                    });

        $('.selectpicker').selectpicker({ size: 4});
        $('.selectpicker').focus().select();
        i++;
    }
});

get_products.php

<?php
session_start();
ob_start();
require "../model/configuration.php";
?>
<?php
$queryprd=$db->execute("select * from product_add where delet='0'");
while($result=$queryprd->fetch_assoc())
{
?>
<option value="<?php echo $result['productcode']."|".$result['productname'];?>"><?php echo $result['productcode']."&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;".$result['productname'];?></option>
<?php
}
?>

对于第一行动态选择正常工作，这里我们使用enter键来关注下一个输入字段。当我们在最后一个输入字段上按输入键时，它会创建新行。我们在新创建的行中遇到问题，第二行的选择选项不起作用，我们无法选择产品列表。请帮我们解决这个问题谢谢。

Answer 1

尝试添加以下行：

  $('.selectpicker').selectpicker({ size: 4});
  $('.selectpicker').focus().select();
  i++;

在AJAX成功功能中，更改＆＃39; .selectpicker＆＃39; for＆＃39; #code_'+i .selectpicker

通常你必须添加选择器参数，否则事件是直接绑定而不是委托，只有在元素已经存在时才有效（因此它不适用于动态加载的内容）。

请参阅http://api.jquery.com/on/#direct-and-delegated-events

喜欢：.on("click", function(event){

但是selectpicker()我觉得它无法完成。

您可以选择：.selectpicker('refresh');

//删除或添加选项或何时需要这样做通过JavaScript禁用/启用选择。

更新

根据您的演示，您应该使用：

$('#code_'+i).sibiling('.inputs').find('.selecticker').html(response);

因为selectpicker有动态创建的内容。您必须将数据附加到适当的元素（<ul class='selectpicker...'></ul>）。

为此，您需要先使用以下方法创建de selectpicker

$('.selectpicker').selectpicker({ size: 4});
$('.selectpicker').focus().select();
i++;

然后在其中附加内容，然后更新选择器：

$('.selectpicker').selectpicker('refresh');

动态内容选择不起作用

1 个答案: