Question

我正在创建一个应用程序，当用户按Enter键时，它应该进行ajax调用。

我使用插件浏览项目并为“点击”创建了jQuery代码（完美地工作）。

问题在于，当我按下Enter键调用ajax代码时，会出现某种冲突，但它不起作用。

有没有人有任何解决方案或其他方法？感谢。

的javascript

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

$('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事件绑定到正文或文档，它将完全填满您的目的。

Answer 2

实际上，除非有焦点，否则按键事件不会被元素触发。将此事件绑定到文档会更加保证。

将您的功能更改为：

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

ajax调用的关键事件不起作用

2 个答案: