使用 jQuery 将内容附加到 DOM 时出现问题(仅在 Safari iOS 上）

Issue appending content to DOM with jQuery (only on Safari iOS)

本文关键字：问题 仅在 Safari iOS jQuery DOM 使用      更新时间：2023-09-26

在成功的AJAX请求之后，我使用Jquery将一些HTML附加到DOM中。

它适用于所有桌面浏览器，iPhone模拟器中的Safari和iPhone上的Chrome。

但是，当我在iOS 8的iPhone 5S上在Safari中进行测试时，有时会附加内容，有时根本不附加任何内容。

我希望使用 iPhone 模拟器会在 Safari 中使用开发人员工具揭示问题，但它不会复制该问题。

我已经考虑了 AJAX 请求中 JSON 响应的长度，但它不是很长，问题仍然存在。我也验证了它，看起来很好。

JS的相关部分：

$tpl == 'some html content';
var $node = $($tpl);
$node.data({
    'event_id': event.event_id,
    'event_story_id': (event[0] !== undefined) ? event[0].event_story_id : 0,
    'date': event.datetotime
});
$node.find('time').each(function(i, e) {
    var time = moment(event.event_date_utc);
    $(e).html(time.fromNow());
});
$($node).hide().appendTo('#timeline > ul').fadeIn(800);

JSON 响应：

{"status":"success","message":"","comment_image":"https:'/'/s3-eu-west-1.amazonaws.com'/mfstb'/profile'/small'/70-507d37914cdaf.jpg","user":{"title":"Asa Carter's Life Stories","image":"https:'/'/s3-eu-west-1.amazonaws.com'/mfstb'/profile'/small'/70-507d37914cdaf.jpg"},"paging":{"total":46,"limit":3,"pages":16,"page":1,"prev_page":1,"next_page":2},"events":{"0":{"event_id":1373,"event_name":"fgdfgdfg","event_description":"","event_date":"25'/07'/14","event_date_utc":"2014-07-25T16:25:48+00:00","event_datetotime":1406305548,"story_count":{"total":1,"photo":1,"video":0,"audio":0},"owner":1,"comment_count":0,"number_of_comment":2,"stories":{"0":{"event_story_id":"2238","event_story_description":"","event_story_type":"photo","event_story_token":"53d285100e571","event_file_type":"jpg","event_file_url":"https:'/'/s3-eu-west-1.amazonaws.com'/mfstb'/story'/photo'/full'/2238-53d285100e571.jpg","event_medium_url":"https:'/'/s3-eu-west-1.amazonaws.com'/mfstb'/story'/photo'/large'/2238-53d285100e571.jpg","event_thumb_url":"https:'/'/s3-eu-west-1.amazonaws.com'/mfstb'/story'/photo'/small'/2238-53d285100e571.jpg","event_comment":"","processed":"1"}}},"1":{"event_id":1368,"event_name":"Test MP4","event_description":"","event_date":"02'/06'/14","event_date_utc":"2014-06-02T10:21:09+00:00","event_datetotime":1401704469,"story_count":{"total":1,"photo":0,"video":1,"audio":0},"owner":1,"comment_count":0,"number_of_comment":0,"stories":{"0":{"event_story_id":"2230","event_story_description":"","event_story_type":"video","event_story_token":"538c420659e07","event_file_type":"m4v","event_file_url":"https:'/'/s3-eu-west-1.amazonaws.com'/mfstb'/story'/video'/2230-538c420659e07.m4v","event_medium_url":"","event_thumb_url":"https:'/'/s3-eu-west-1.amazonaws.com'/mfstb'/story'/photo'/small'/2230-538c420659e07.jpg","event_comment":"","processed":"1"}}},"2":{"event_id":1367,"event_name":"Testing 3gp video sample","event_description":"","event_date":"01'/06'/14","event_date_utc":"2014-06-01T21:54:22+00:00","event_datetotime":1401659662,"story_count":{"total":1,"photo":0,"video":1,"audio":0},"owner":1,"comment_count":0,"number_of_comment":0,"stories":{"0":{"event_story_id":"2229","event_story_description":"","event_story_type":"video","event_story_token":"538b92ffcf560","event_file_type":"m4v","event_file_url":"https:'/'/s3-eu-west-1.amazonaws.com'/mfstb'/story'/video'/2229-538b92ffcf560.m4v","event_medium_url":"","event_thumb_url":"https:'/'/s3-eu-west-1.amazonaws.com'/mfstb'/story'/photo'/small'/2229-538b92ffcf560.jpg","event_comment":"","processed":"1"}}}},"generated":0.1763}

请改用此 JS 代码。

$tpl == 'some html content';
var $node = $($tpl);
event.preventDefault();
$node.data({
    'event_id': event.event_id,
    'event_story_id': (event[0] !== undefined) ? event[0].event_story_id : 0,
    'date': event.datetotime
});
$node.find('time').each(function(i, e) {
    var time = moment(event.event_date_utc);
    $(e).html(time.fromNow());
});
$($node).hide().appendTo('#timeline > ul').fadeIn(800);
相关文章：