2016-10-24 13 views
0

мне очень нужна ваша помощь,Невозможно захватить удаления нажатия в JQuery Диалог

Я пытаюсь захватить удаления нажатия клавиши в #refdocs_list UL, но по какой-то странной причине, когда я попал удалить ключ, ничего происходит, и я не получаю никакого сообщения.

Я в затруднении для решений.

Вот Разметка в вопрос:

<!DOCTYPE html> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 

<script type="text/javascript" src="jquery.js"></script> 

<script type="text/javascript" src="jquery-ui.js"></script> 

<link rel="stylesheet" href="jquery-ui.css" type="text/css"/> 

<style type="text/css"> 
.refdoc_selected { 
    background-color: rgb(10,36,106); 
    color: #FFF; 
} 
</style> 

<script type="text/javascript"> 

function showDialog() { 

var refdocs = [12256363,96415678,96857456,12236748] 

      var markup ='<div style="margin-bottom: 2px;">' + 
          '<p style="margin: 0; padding:0;">' + 
           '<input style="margin-top: 1px; margin-right: 2px" float: left;" id="refdocs_input" type="text" class="field_outline inputbox">'+  
           '<button id="btn_add_refdoc" class="button" style="margin-right: 2px;"><img style="width: 14px;" src="images/icon_check.png"></button>'+ 
           '<button id="btn_del_refdoc" class="button" style="margin-right: 2px;"><img src="images/icon_delete.png"></button>'+ 
           '<button id="btn_empty_refdocs" class="button" style="margin-right: 2px;"><img src="images/icon_trash.png"></button>'+ 
          '</p>'+ 
         '</div>'+ 
         '<div class="field_outline" style="background: #FFF; min-height: 75px; max-height: 300px; overflow-y: auto;">'+ 
         '<ul id="refdocs_list" style="list-style-type: none; margin: 0; padding: 3px 0px 3px 3px;"></ul>'+ 
         '</div>' 

      $("<div></div>").dialog({ 
       modal: false, 
       title: "Reference Documents", 
       width: 350, 


       open: function() { 

        $(this).html(markup) 

        for (var i = 0; i < refdocs.length; i++){ 
         $("#refdocs_list").append('<li style="background-image: url(images/icon_doc.png); background-repeat: no-repeat; background-position: 0 50%; padding: 4px 0 2px 16px;">'+ refdocs[i] +'</li>') 
        } 


        $("#refdocs_list li").click(function() { 
         $(this).addClass("refdoc_selected").siblings().removeClass("refdoc_selected") 
         document.getElementById('refdocs_input').value = $(this).text() 
        }); 

        //NOT WORKING: 
        $('#refdocs_list ul').keyup(function(e){ 
         if(e.keyCode == 46) { 
          alert('Delete Key Pressed'); 
         } 
        }); 


       }, 
       close: function(){ 
        $(this).remove(); 
       }, 
       buttons: [ 
       { 
        text: "CLOSE", 
        "class": 'button', 
        click: function() { 

         $(this).dialog("close") 
        } 
       }, 
       { 
        text: "CANCEL", 
        "class": 'button', 
        click: function() { 
         $(this).dialog("close") 
        } 
       } 
      ] 


      });//end dialog 
} 
</script> 

</head> 

<body> 

<input type="button" onclick="showDialog()" value="test"> 

</body> 

</html> 

ответ

0

Прикрепите его к телу:

$('body').keyup(function (e) {  
    if(e.keyCode == 46) { 
     alert('Delete Key Pressed'); 
    } 
    }); 
0

Attach событие KeyUp к самому диалогу по:

$(this).on('keyup', function(e) { 
if (e.which == 46) { do whatever } 
});