jquery onclick不起作用

我在自舉模型中的input上有自動完成。我從codeigniter得到響應作爲JSON和看到名單下拉，但當我點擊下拉列表沒有什麼heppens。jquery onclick不起作用

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 (Album) (2016)"]

我試過了什麼？

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

和

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

截圖

來源

2016-06-12 Hassaan

試圖通過所有的列表元素循環和添加事件偵聽器和重做是每次輸入的更新？ – Li357

nope'input'也沒有更新.. – Hassaan

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

看看這個代碼片段：

<!DOCTYPE html> 
 
<html itemscope itemtype="http://schema.org/QAPage"> 
 
<head> 
 
\t <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() { 
 
\t $(document).on("click", ".list li", function(){ 
 
\t \t alert("Clicked " + $(this).html() + "!"); 
 
\t }); 
 
\t $(".list").append("<li role='none'>Item 1</li>"); 
 
\t $(".list").append("<li>Item 2</li>"); 
 
\t $(".list").append("<li>Item 3</li>"); 
 
}); 
 
</script> 
 
<ul class="list"> 
 
</ul> 
 
</body> 
 
</html>

來源

2016-06-12 21:12:52

你能舉例說明代碼嗎？ – Hassaan

var tmpLiObj = createElement（「li」）; tmpLiObj.innerHTML = value ['label']; tmpLiObj.setAttribute（「role」，「presentation」）; $（ '＃DropdownAlbums'）追加（tmpLiObj）。 –

無論如何，你想要一個以前的事件監聽器綁定到dinamically創建的元素，看看這個：http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements –

jquery onclick不起作用

回答

相關問題