javascript jQuery ajax 在 iOS 中不起作用

jQuery ajax not working in iOS

提问by Webnet

One of our engineers just brought his iPad over to me and showed a feature not working on our site. This works in Chrome and Firefox, but it doesn't work on the iPhone or iPad. It's 3 select boxes that when you click the value in the first one, it runs ajax and populates the 2nd select box.

我们的一位工程师刚把他的 iPad 拿给我，并展示了一个在我们网站上不起作用的功能。这适用于 Chrome 和 Firefox，但不适用于 iPhone 或 iPad。这是 3 个选择框，当您单击第一个中的值时，它会运行 ajax 并填充第二个选择框。

This is the functionality that doesn't work in iOS.

这是在 iOS 中不起作用的功能。

We're a bit stumped on where to begin testing this. Can anyone provide some advice on where to begin debugging this or can you see anything we did wrong?

我们对从哪里开始测试这个问题感到有些困惑。任何人都可以提供一些关于从哪里开始调试的建议，或者你能看到我们做错了什么吗？

    $().ready(function () {
        $('.vehicle-search .make').bind('click', function (e) {
            var makeId = $(e.target).val();
            var container = $(e.target).parent('.vehicle-search');
            if (parseInt(makeId) > 0) {
                $.ajax({
                    url:  site.internal.url + '/lib/ajax/vehicle/make/getModelList.php',
                    type: 'post',
                    dataType: 'json',
                    success: function (r) {
                        if (r.length > 0) {
                            $('.vehicle-search > .model').html('');
                            $('.vehicle-search > .year').html('');

                            var html = '';
                            for (var i = 0; i < r.length; i++) {
                                html += "<option value='"+r[i].id+"'>"+r[i].name+"</option>";
                            }

                            $('.vehicle-search > .model').html(html);
                        } else {
                            alert('We did not find any models for this make');
                        }
                    },
                    error: function () {
                        alert('Unable to process your request, ajax file not found');
                        return false;
                    },
                    data: {
                        makeId: makeId
                        }
                });
            } else {
                $('.vehicle-search > .model').html('');
                $('.vehicle-search > .year').html('');
            }
        });
........

回答by Phrogz

Bind to the changeevent of the <select>instead of the clickevent.

绑定到change事件<select>而不是click事件。

Also, you should enable the Developer Consolefor the iPad so that you can see any JS errors that may or may not be occurring.

此外，您应该为 iPad启用开发者控制台，以便您可以看到任何可能发生或可能不会发生的 JS 错误。

In the future, put in console.logstatements in event handlers as a sanity check to see if they are getting called at all, and if they are to determine at what point they are failing.

将来，console.log在事件处理程序中放入语句作为完整性检查，以查看它们是否被调用，以及它们是否要确定它们在什么时候失败。

回答by timdream

I have no idea what's wrong, but generally speaking, here is what you can do with Mobile Safari and IE that comes with no handly debug console.

我不知道出了什么问题，但总的来说，这是您可以使用 Mobile Safari 和 IE 执行的操作，它们没有手动调试控制台。

1. Add some alert()to your code to at least find out when did the script stop.
2. you event handlers doesn't receive any variable except rin success(r). Look into the doc, you will find variables that you could probe or alert()that could help you what's really going on. Especially the error()handler.
3. compete()handler will execute whenever the ajax had succeed of failed. Try to catch the variables too.

1. 将一些添加alert()到您的代码中以至少找出脚本何时停止。
2. 除了rin之外，您的事件处理程序不会收到任何变量success(r)。查看文档，您会发现可以探测或alert()可以帮助您了解实际情况的变量。尤其是error()搬运工。
3. compete()处理程序将在 ajax 成功或失败时执行。也尝试捕捉变量。

回答by Kobbe

The problem is the cache. Add this line of code and the problem should be solved.

问题是缓存。添加这行代码，问题应该就解决了。

$.ajaxSetup({ cache: false });