php - 动态内容选择不起作用

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 成功函数内并更改 ' .selectpicker '对于'#code_'+i .selectpicker

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

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

例如:.on("click", function(event){

但与 selectpicker()我认为这是不可能的。

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

//This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript.

更新

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

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

因为里面有selectpicker动态创建的内容。您必须将数据附加到正确的元素 ( <ul class='selectpicker...'></ul> )。

为此，您需要首先创建 selectpicker通过使用:

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

然后附加其中的内容，然后更新选择器:

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