ajax 호출의 키 이벤트가 작동하지 않습니다.

Question

사용자가 Enter 키를 누르면 ajax 호출을해야하는 응용 프로그램을 만들고 있습니다.

플러그인을 사용하여 항목을 탐색하고 "클릭"(완벽하게 작동)을위한 jQuery 코드를 만들었습니다.

문제는 내가 Enter 키를 눌러 아약스 코드를 호출 할 때 충돌이 발생하고 작동하지 않는다는 것입니다.

누군가 해결책이나 다른 방법이 있습니까? 덕분에 .

가 초점을하지 않는 한 실제로 키 누르기 이벤트가 a 요소에 의해 트리거되지 않습니다

var main = function() { 
    var url = "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20xml%20where%20url%3D'http%3A%2F%2Frss.cnn.com%2Fservices%2Fpodcasting%2Fac360%2Frss.xml'%20AND%20itemPath%3D%22%2F%2Fchannel%22&format=json&diagnostics=true&callback=?"; 

    $.ajax({ 
     type: 'GET', 
     url: url, 
     async: false, 
     jsonpCallback: 'jsonCallback', 
     contentType: "application/json", 
     dataType: 'jsonp', 
     success: function (json) { 
      // titulos 
      var titles = json.query.results.channel.item.map(function (item) { 
       return item.title; 

      }); 

      // urls 
      var urls = json.query.results.channel.item.map(function (item) { 
       return item.origLink; 

      }); 

      $(".container-list-podcast ul").append('<li>' + titles.join('</li><li>')); 
      $(".container-list-podcast ul li").each(function (key, value) { 
       var text = $(this).text(); 
       $(this).html('<a class="link-podcast" href="' + urls[key] + '">' + text + '</a>'); 
      }); 

      // Load KeyNavigation 
      a = $('.nav_holder li a').keynav(function() { 
       return window.keyNavigationDisabled; 
      }); 


     }, 
     error: function (e) { 
      console.log(e.message); 
     } 
    }); 


}(jQuery); 

/// 

$(document).ready(function() { 
    // Call Ajax Click <-- work 
    $('.container-list-podcast').on('click', '.link-podcast', function (e) { 
     e.preventDefault(); 
     $('.video').attr('src', this.href); 
    }); 

    // Call Ajax Key Enter <-- dont work 
    $('.container-list-podcast').on('keypress', '.selected', function (e) { 
     e.preventDefault(); 
     if (e.which == 13) { // keyCode 13 == Enter key 
      $('.video').attr('src', this.href); 
     } 
    }); 

}); 

jsfiddle

Answer 1

자바 스크립트. 이 이벤트를 문서에 바인딩하는 것이 더 보증됩니다.

는 귀하의 기능을 변경

:

// Call Ajax Key Enter 
$(document).on('keypress', function (e) { 

    if (e.which == 13) { // keyCode 13 == Enter key 
     $('.video').attr('src', $('.container-list-podcast .selected').prop('href')); 
    } 
    e.preventDefault(); 
}); 

JSFiddle Example

Answer 2

$('body').on('keydown', function (e) { 
    e.preventDefault(); 
    if (e.which == 13) { // keyCode 13 == Enter key 
     $('.selected').trigger('click', function() { 
     $('.video').attr('src', this.href); 
     }); 
    } 
}); 

당신은 몸에를 keyDown 이벤트를 바인딩을 시도하거나 전체 목적을 채울 것입니다 문서화 할 수 있습니다.