-1

我正在制作一个应用程序，当用户按 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

4

2 回答 2

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

于 2013-08-13T16:36:30.770 回答
-1

实际上 keypress 事件不会被 a 元素触发，除非它有焦点。将此事件绑定到文档会更有保证。

将您的功能更改为：

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

于 2013-08-13T15:59:20.663 回答