Выборка элементов с присвоенным классов в JS

@Teterichev · Регистрация: 04.11.2013

Author24 — интернет-сервис помощи студентам

Не могу выбрать элементы с только что присвоенным классом в JS. Думаю, что так и должно быть. Но может как-то можно?

Тут класс присваивается:

Javascript

$('#dropper1').droppable({
    drop: function() {
         бла     
            $('.ui-draggable-dragging').addClass('dropped1') //то самое
         бла 
         бла 
         бла         
        }
});

А потом я делаю так:

Javascript

1
2
3

$('.dropped1').contextmenu(function() {
    alert('Сука, я сделал это!');     
});

mihalken · 17.06.2014, 10:17

Javascript

1
2
3

$( $( '.dropped1' ).get(0) ).contextmenu(function() {
    alert('Работает!');       
});

?

@Teterichev · 17.06.2014, 11:12 **[ТС]**

Не

mihalken · 17.06.2014, 12:21

Что не?
http://jsfiddle.net/mihalken/7JBQb/4/
Что в консоли?

@Teterichev · 17.06.2014, 18:28 **[ТС]**

По ссылке же другой метод задействован?

Так делал:

Javascript

var d2 = jQuery(document).find('.dropped1');
d2.on('click', function() {
    console.log('clicked! .d2');
});

Консоль молчит. Желания не исполняются.

mihalken · 19.06.2014, 08:52

Сообщение от Teterichev

Javascript

1	drop: function() {

Это выполняется? Что дропается в #dropper1?
Короче, HTML в студию.

@Teterichev · 19.06.2014, 18:53 **[ТС]**

Да, это выполняется, претензий нет:

Javascript

$('#dropper1').droppable({
    drop: function() {
         бла        
         $('.ui-draggable-dragging').addClass('dropped1') //то самое
         бла    
         бла    
         бла            
        }
});

А вот выборка нет:

Javascript

var d2 = jQuery(document).find('.dropped1');
d2.on('click', function() {
    alert('ok');
});

В #dropper1 дропается следующие штуки:

HTML5

<div id='container'>
        <div id='quadrate1-1' class='quadrate quadrate1'>
        <h2>SKY.FM Mostly Classical </h2>
        </div>
        <div id='quadrate1-2' class='quadrate quadrate1'>
        <h2>SKY.FM Solo Piano</h2>
        </div>
        <div id='quadrate1-3' class='quadrate quadrate1'>
        <h2>Радио 'Орфей'</h2>
        </div>
        И т.д.
        И т.д.
        И т.д.
</div>

@Teterichev · 22.06.2014, 14:33 **[ТС]**

Ребят, есть идеи?

@vovandr · 22.06.2014, 21:03

Так работает?

Javascript

1
2
3

document.on('click', '.dropped1',  function() {
    alert('ok');
});

mihalken · 23.06.2014, 08:18

Javascript

1	$('.ui-draggable-dragging')

Перетаскиваемому элементу автоматически назначается класс .ui-draggable. Непосредственно во время перетаскивания ему также дополнительно назначается класс .ui-draggable-dragging. ©wisdomweb.ru

Javascript

1
2
3

drop: function() {      
    $('.ui-draggable-dragging').addClass('dropped1') //то самое       
}

на

Javascript

drop: function( event, ui ) {
    ui.draggable
    .contextmenu(function() {
        alert('Работает!');       
    });
}

?

@Teterichev · 23.06.2014, 11:18 **[ТС]**

Ребят, возможно я узко смотрю на свою проблему?

Описываю:
Есть чуть больше чем дохрена div'ов-квадратиков. Все они драггэйбл. Перетаскиваются сюда:

Выборка элементов с присвоенным классов в JS

На изображении #dropper1, #dropper2, #dropper3, #dropper4

Для каждого dropper'а выполняется ряд действий на событие drop (в т.ч. и присвоение класса .dropped1 "перетащенному" квадратику в #dropper1, .dropped2-#dropper2 и т.д.). Все норм

А теперь то, что мне нужно:
Мне нужно выполнять уже другой ряд действие с вновь присвоенным классом .dropped1, .dropped2, .dropped3, .dropped4
А именно:
Если квадратик будет сброшен на какой-либо dropper, то ему присваивается класс .dropped[ЦИФРАДРОППЕРА], а у того dropper'а происходит .draggable('option', 'disabled', true);
А вот если я кликну по классу .dropped[ЦИФРАДРОППЕРА] (что пока и не получается), то у того dropper'a[ЦИФРАДРОППЕРА] произойдет .draggable('option', 'disabled', false);
Но я не могу сделать такую выборку по вновь созданному классу. А больше я не знаю, за что его зацепить.

mixenik · 23.06.2014, 12:04

я, конечно, сейчас задам глупый вопрос, но где вы назначаете обработчик события? в каком месте js?

Добавлено через 29 секунд
почему не сразу после добавления класса?

@Teterichev · 23.06.2014, 12:22 **[ТС]**

Запускаю здесь:

Javascript

$('#dropper1').droppable({
    drop: function() {
            $('.ui-draggable-dragging').removeClass('vquadrate')        
            $('.ui-draggable-dragging').addClass('dropped1')
            $('.ui-draggable-dragging').css('left', '50%');
            $('.ui-draggable-dragging').css('top', '160px');            
            $('.ui-draggable-dragging').css('margin-left', '140px');    
            $('.ui-draggable-dragging').draggable('option', 'disabled', true);          
        }
});
$('.dropped1').click(function() {
    alert('ok');       
});

Кажется начал понимать... Я пытаюсь найти класс .dropped1 там, где его уже нету... Так?
Я не знаю как эти две вещи написать в одном обработчике

mihalken · 23.06.2014, 12:26

Сообщение от Teterichev

Кажется начал понимать... Я пытаюсь найти класс .dropped1 там, где его уже нету... Так?

Выборка элементов с присвоенным классов в JS
Класс который вы ищете .ui-draggable-dragging, когда добавляете класс .dropped1, не существует на тот момент когда происходит событие drop.

Сообщение от Teterichev

Я не знаю как эти две вещи написать в одном обработчике

Выборка элементов с присвоенным классов в JS

mixenik · 23.06.2014, 13:33

Сообщение от Teterichev

Кажется начал понимать... Я пытаюсь найти класс .dropped1 там, где его уже нету... Так?

.dropped1 как бы еще нету, если ваш код выполняется во время загрузки страницы.

@Teterichev · 23.06.2014, 13:42 **[ТС]**

Нет. Класс, который я ищу это .dropped1. Про .ui-draggable-dragging я знаю, и использую его в другом случае.

Вот код элемента, который был сброшен:

HTML5

1	<div id="quadrate1-1" class="quadrate1 ui-draggable dropped1 ui-draggable-disabled ui-state-disabled" aria-disabled="true" style="left: 50%; top: 160px; margin-left: 140px;">

Более чем уверен, что в этом что-то есть:

Javascript

drop: function( event, ui ) {
    ui.draggable
    .contextmenu(function() {
        alert('Работает!');       
    });
}

Только мне нужно искать .dropped1 и выполнять еще и это:

Javascript

    drop: function() {
            $('.ui-draggable-dragging').removeClass('vquadrate')        
            $('.ui-draggable-dragging').addClass('dropped1')
            $('.ui-draggable-dragging').css('left', '50%');
            $('.ui-draggable-dragging').css('top', '160px');            
            $('.ui-draggable-dragging').css('margin-left', '140px');    
            $('.ui-draggable-dragging').draggable('option', 'disabled', true);          
        }

Мне нужно написать все в одном обработчике, так?

mixenik · 23.06.2014, 14:11

после

Сообщение от Teterichev

$('.ui-draggable-dragging').addClass('dropped1')

добавьте

Javascript

1
2
3

$('.dropped1').contextmenu(function() {
    alert('Сука, я сделал это!');       
});

Добавлено через 33 секунды
т.е. вы должны впихнуть класс в dom и сразу повесить обработчик

@Teterichev · 23.06.2014, 14:28 **[ТС]**

Да!!! Так помогло!

Javascript

            $('.ui-draggable-dragging').addClass('dropped1')
            $('.dropped1').contextmenu(function() {
            alert('Сука, я сделал это!');       
            })

Всем огромнейшее спасибо, всем плюс стопицот лайков в карму :)
Ну и кнопочки на лучший ответ и на спасибо всем понажимал :):)

Спасибо огромное :)

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	23.06.2014, 13:33	15
	Сообщение от Teterichev Кажется начал понимать... Я пытаюсь найти класс .dropped1 там, где его уже нету... Так? .dropped1 как бы еще нету, если ваш код выполняется во время загрузки страницы. 1

Выборка элементов с присвоенным классов в JS

Решение

Решение

@Teterichev 2 / 2 / 0 Регистрация: 04.11.2013 Сообщений: 101
	17.06.2014, 11:12 [ТС]	3
	Не 0

mihalken 97 / 97 / 74 Регистрация: 15.05.2014 Сообщений: 269 Записей в блоге: 2
	17.06.2014, 12:21	4
	Что не? http://jsfiddle.net/mihalken/7JBQb/4/ Что в консоли? 1

@Teterichev 2 / 2 / 0 Регистрация: 04.11.2013 Сообщений: 101
	22.06.2014, 14:33 [ТС]	8
	Ребят, есть идеи? 0

@Teterichev 2 / 2 / 0 Регистрация: 04.11.2013 Сообщений: 101
	23.06.2014, 11:18 [ТС]	11
	Ребят, возможно я узко смотрю на свою проблему? Описываю: Есть чуть больше чем дохрена div'ов-квадратиков. Все они драггэйбл. Перетаскиваются сюда: На изображении #dropper1, #dropper2, #dropper3, #dropper4 Для каждого dropper'а выполняется ряд действий на событие drop (в т.ч. и присвоение класса .dropped1 "перетащенному" квадратику в #dropper1, .dropped2-#dropper2 и т.д.). Все норм А теперь то, что мне нужно: Мне нужно выполнять уже другой ряд действие с вновь присвоенным классом .dropped1, .dropped2, .dropped3, .dropped4 А именно: Если квадратик будет сброшен на какой-либо dropper, то ему присваивается класс .dropped[ЦИФРАДРОППЕРА], а у того dropper'а происходит .draggable('option', 'disabled', true); А вот если я кликну по классу .dropped[ЦИФРАДРОППЕРА] (что пока и не получается), то у того dropper'a[ЦИФРАДРОППЕРА] произойдет .draggable('option', 'disabled', false); Но я не могу сделать такую выборку по вновь созданному классу. А больше я не знаю, за что его зацепить. 0

mixenik Все элементарное - сложно 133 / 118 / 50 Регистрация: 14.04.2014 Сообщений: 509
	23.06.2014, 12:04	12
	я, конечно, сейчас задам глупый вопрос, но где вы назначаете обработчик события? в каком месте js? Добавлено через 29 секунд почему не сразу после добавления класса? 1

mihalken 97 / 97 / 74 Регистрация: 15.05.2014 Сообщений: 269 Записей в блоге: 2
	23.06.2014, 12:26	14
	Сообщение от Teterichev Кажется начал понимать... Я пытаюсь найти класс .dropped1 там, где его уже нету... Так? Выборка элементов с присвоенным классов в JS Класс который вы ищете .ui-draggable-dragging, когда добавляете класс .dropped1, не существует на тот момент когда происходит событие drop. Сообщение от Teterichev Я не знаю как эти две вещи написать в одном обработчике Выборка элементов с присвоенным классов в JS 1