Как обращаться к свойству объекта, пришедшего через ajax?

Question

[Павел Усов]

Подключаю

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.event.move.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.event.swipe.js"></script>

$(function(){
	$(document).ready(function() {
		var wrap = $('.slidesContainer'),
		    slides = wrap.find('.slide'),
		    active = slides.filter('.active'),
		    i = slides.index(active),
		    width = $(window).width();

		$(document)
		.on('move', slides, function(e) {
			var left = 100 * e.distX / width;
			// Move slides with the finger
			if(e.distX < 0){
				slides[i].css('left', left + '%');
				slides[i+1].style.left = (left+100)+'%';
			}
			if(e.distX > 0){
				slides[i].css('left', left + '%');
				slides[i-1].style.left = (left-100)+'%';
			}
		})
	})
})

В общем, не было бы проблем, но данные приходят из ajax. Как событие вызвать, я разобрался, через $(document) и в параметрах объект указать.
e.distX - через консоль приходит.
А вот как к свойству объекта slides обратиться - непонятно)
ошибка на эту строку
slides[i].css('left', left + '%');
Uncaught TypeError: Cannot call method 'css' of undefined
на такую то же самое
slides[i+1].style.left = (left+100)+'%';

Comments

[Кирилл]

Если вкратце про ваш вопрос, то "ничегонепонятно". Где получаете объект? Да и получаете вы, скорее всего, не объект, а JSON или HTML. Ну и далее - просто догадка - с синхронностью/асинхронностью разобрались? Уверены, что обращаетесь к объекту ПОСЛЕ того, как пришел ответ от сервера?

[Павел Усов]

@manny согласен, чтобы понять нужно проникнуться)
Т.к. скрипт лежит в $(document).ready(function() {})
то выходит, что переменные var wrap = $('.slidesContainer') и т.п. не инициализируются вне события "move".
И событие на самом деле срабатывает при манипуляциях на любом месте из документа, а мне нужно только на слайде.
Вот как мне всю эту писанину обернуть иначе и вызывать после прихода данных, которые в виде HTML?
чтобы было
не так $(document).on('move', slides, function(e) {
а так slides.on('move', function(e) {

Answer 1

[Евгений Попов]

slides[i] -> $(slides).eq(i)
eq(порядковый номер элемента в списке выбранных селектором)
Если я конечно правильно понял вашу проблему.

Answer 2

[Кирилл]

догадка: вы учли что .index() возвращает "zero-based position" (то бишь начинает отсчет с нуля)?

Answer 3

[Cheshire_a]

Если я вас правильно понял:
1) есть объект класса .slidesContainer
2) в нем объекты класса .slide
3) при событии "move" на ".slide" запускается ajax-запрос, который возвращает новый DOM элемент. и этому .slide надо установить left

$(".slidesContainer").on("move", ".slide", function(){
    $.ajax({
      url: "ваш урл",
      success: (function (data, status, xhr) {
        if (xhr.readyState != 4) return;
        data; //тут находятся данные, полученные с сервера
        //делайте с ними что хотите
        //но я бы лучше получал их в JSON
        //или получал готовые DOM-объекты (все .slide-ы) и загонял их в $(".slidesContainer")
        //но может быть я просто не понял ваш вопрос)
        xhr = null;
      })
    });
  });