jquery onclick does not working

Question

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

Try looping through all the list elements and adding event listeners and redoing that everytime the input is updated? — Andrew Li, Jun 12 '16 at 21:03

score 1 · Accepted Answer · edited Jun 13 '16 at 06:48

1

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>

edited Jun 13 '16 at 06:48

Muhammad Hassaan

7,296
6
30
50

answered Jun 12 '16 at 21:12

Eduardo Escobar

3,301
2
18
15

var tmpLiObj = createElement("li"); tmpLiObj.innerHTML = value['label']; tmpLiObj.setAttribute("role", "presentation"); $('#DropdownAlbums').append(tmpLiObj); – Eduardo Escobar Jun 12 '16 at 21:24
Anyway, you want a previously event listener to be bound to dinamically created elements, take a look to this: http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements – Eduardo Escobar Jun 12 '16 at 21:30
I got this error in console and did not see list too `ReferenceError: createElement is not defined` – Muhammad Hassaan Jun 12 '16 at 21:34
Sorry i meant document.createElement – Eduardo Escobar Jun 12 '16 at 21:35
updated but issue is still there. No alert or updated anything :( – Muhammad Hassaan Jun 12 '16 at 21:36
As i told you, in the link i sent to you, use `$(document).on("click", "ul.dropdown-menu li", function() {` for the click event declaration line, instead of `$('ul.dropdown-menu').on('click', 'li', function () {` – Eduardo Escobar Jun 12 '16 at 21:48
I updated my answer and add a code snippet, try it. Basically this code uses the same dynamic elements appeding system, and event binding over them. – Eduardo Escobar Jun 12 '16 at 22:03
I got problem. There was no problem with my code but I placed my code at wrong place. I have accepted and voted up your answer. Please vote up my question if you found efforts in my question. – Muhammad Hassaan Jun 13 '16 at 06:50

jquery onclick does not working

1 Answers1