Hassaan Hassaan - 2 years ago 151
jQuery Question

jquery onclick does not working

I have autocomplete on

in bootstrap model. I am getting response from
as json and being seeing list as drop down but when I click on drop down list nothing heppens.


<!-- 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 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 class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

jQuery code

$(document).on('keyup', '#search_album', function(e)
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'

type: "POST",
url: "<?=site_url()?>itadmin/ajaxSongs",
data: form_data,
dataType: "json",
success: function (data)
if (data.length > 0)
$('#search_album').attr("data-toggle", "dropdown");
else if (data.length == 0)
$('#search_album').attr("data-toggle", "");
$.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 ()

Response I'm getting from
request as

[{"label":"Kyaa Kool Hain Hum 3 (2016)","value":"9151"},{"label":"Beqarar Karke Humein (Album) (2016)"]

What I have tried?

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


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


enter image description here

Answer Source

You should use $(document).on("click", selector, function(){}

Take a look to this code snippet:

<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/QAPage">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<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>");
<ul class="list">

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download