2016-10-24 2 views
0

ich wirklich brauchen Ihre Hilfe,konnte nicht löschen keypress in einem jQuery Dialog

Ich versuche, den Lösch keypress in der UL #refdocs_list zu erfassen, aber aus irgendeinem seltsamen Grund erfassen, wenn ich die Löschtaste schlagen, nichts passiert und ich bekomme keine Nachricht.

Ich bin ratlos für Lösungen. Hier

ist das Markup in Frage:

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

Antwort

0

Bringen Sie ihn auf den Körper:

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

Bringen Sie das KeyUp-Ereignis in den Dialog selbst durch:

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