Question

想知道为什么生成第二个下拉菜单后下拉按钮不起作用等等，请提供帮助。谢谢

$(document).on('click','.closeproductbox',function() {
    $(this).closest(".productbox").empty();
});

我知道它与以下功能中的事件委托问题有关，但我对为什么关闭按钮起作用但下拉菜单为何无效感到困惑？

    $('.dropdown').on('click', 'button', (function () {
        $(".btn-group").find($("ul.type")).empty();
        $("ul.type").append(loadlist());
    }));

    $(".dropdown-menu").on('click', 'li a ', (function(){
    console.log('hre');
      $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
      $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
    }));

    $("#addproductbox").click(function(){
        $("#product_detail").append(genProduct());
    });

    function loadlist() {
        var ajax_call_data = '<li><a  data-value="action one">one</a></li><li><a  data-value="action two">two</a></li<li><a  data-value="action three">three</a></li';
        return ajax_call_data;
    }

        function genProduct() {
        var code = '';
        code = '<div class="productbox">';
        code += '<div class="clbox"><button type="button" class="btn btn-default closeproductbox" aria-label="Left Align"><span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span></button></div><div class="input-group input-group-lg"><span class="input-group-addon" id="basic-addon1">Type:</span><div class="input-group-btn dropdown"><div class="btn-group dropup"><button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span>Please select</span> <span class="caret"></span></button><ul class="dropdown-menu type" role="menu"></ul></div></div></div>';
        code += '</div><br>';
        return code;
    }

HTML

    <html>
    <head>
    <body>
    <div id="product_detail">
    <div class="productbox">
    <span class="input-group-addon" id="basic-addon1">Type:</span>
    <div class="input-group-btn dropdown">
    <div class="btn-group">
    <button class="btn btn-default dropdown-toggle type productval" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span>- Please select -</span> <span class="caret"></span>
    </button>
    <ul class="dropdown-menu type" role="menu">
    </ul>
    </div>
    </div>
    </div>
    </div><br>
    </div>
    <button id="addproductbox" class="btn btn-default pull-left">+ add more</button>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>
    </body>

    </html>
<!-- end snippet -->

Answer 1

尝试一下：

$("#addproductbox").click(function(){
    $("#product_detail").append(genProduct());
    $("ul.type").append(loadlist());
});

ajax调用数据后出现jquery下拉问题

1 个答案: