Question

我在bootstrap模型中的input上有自动完成功能。我收到来自codeigniter作为json的回复，并将列表视为下拉列表，但是当我点击下拉列表时没有任何内容。

HTML代码

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Find Album</h4>
      </div>
      <div class="modal-body">

        <form class="form-inline" mehtod="post" id="generate-report">
            <div class="form-group">
                <label>Album Name: </label>
                <input id="search_album" autocomplete="off" type="text" class="form-control" placeholder="*">
                <ul class="dropdown-menu album_list" style="margin-left:15px;margin-right:0px;" role="menu" aria-labelledby="dropdownMenu" id="DropdownAlbums"></ul>
            </div>
        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

jQuery代码

$(document).ready(function()
{
    $(document).on('keyup', '#search_album', function(e)
    {
        e.preventDefault();
        var status = 1;

        if($("#search_album").val().length > 2 && status == 1)
        {
            status = 0;

            var form_data = {
                ajax                : '1',
                search_album        : $("#search_album").val(),
                actioncall          : 'auto-complete-search'
            };

            $.ajax({
                type: "POST",
                url: "<?=site_url()?>itadmin/ajaxSongs",
                data: form_data,
                dataType: "json",
                success: function (data)
                {
                    if (data.length > 0)
                    {
                        $('#DropdownAlbums').empty();
                        $('#search_album').attr("data-toggle", "dropdown");
                        $('#DropdownAlbums').dropdown('toggle');
                        $("#album_id").val('0');
                    }
                    else if (data.length == 0)
                    {
                        $('#search_album').attr("data-toggle", "");
                        $("#album_id").val('0');
                    }
                    $.each(data, function (key,value)
                    {
                        if (data.length >= 0)
                        {
                            $('#DropdownAlbums').append('<li role="presentation" >' + value['label'] + '</li>');
                        }
                    });
                    status = 1;
                },
                error: function(e)
                {
                    //if error also set status to true
                    status = 1;
                } 
            });
        }
    });
    //$(document).on('click', 'ul.album_list li', function()
    $('ul.dropdown-menu').on('click', 'li', function ()
    {
        alert('here');
        $('#search_album').val($(this).text());
        $("#album_id").val($(this).val());
    });
});

我从post请求获得的响应为json

[{“label”：“Kyaa Kool Hain Hum 3（2016）”，“value”：“9151”}，{“label”：“Beqarar Karke Humein（专辑）（2016）”]

我尝试了什么？

$(document).on('click', 'ul.album_list li', function()

和

$('ul.album_list').on('click', 'li', function ()

截图

Answer 1

您应该使用$(document).on("click", selector, function(){}

看看这段代码：

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
	$(document).on("click", ".list li", function(){
		alert("Clicked " + $(this).html() + "!");
	});
	$(".list").append("<li role='none'>Item 1</li>");
	$(".list").append("<li>Item 2</li>");
	$(".list").append("<li>Item 3</li>");
});
</script>
<ul class="list">
</ul>
</body>
</html>

jquery onclick不起作用

1 个答案: