Hassaan Hassaan - 5 months ago 29
jQuery Question

jquery onclick does not working

I have autocomplete on

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

HTML Code

<!-- 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 code

$(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());
});
});


Response I'm getting from
post
request as
json



[{"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()


and

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


Screenshot

enter image description here

Answer

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

Take a look to this code snippet:

<!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>