Кликабельный объект jQuery, который передает значения на основе динамических результатов JSON.

Question

Кликабельный объект jQuery, который передает значения на основе динамических результатов JSON.

0

Я ищу лучший способ создания некоторых "объектов" HTML, основанных на массиве объектов jQuery, которые я создал. Затем мне нужно, чтобы каждый из них был кликабельным, и вытащил значения из того, которое было нажато.

Немного фона... Я создаю объекты из ajax-вызовов для внешней службы API. Пользователь ищет имя, затем я получаю массив объектов с тремя свойствами (Id, ImageUrl и Name).

Мне интересно, есть ли "простой"/чистый способ отображения имени и изображения объекта и сделать его интерактивным... тогда, когда объект щелкнут, я хочу передать этот идентификатор обратно на контроллер, который будет в свою очередь, отобразит страницу сведений для выбранного объекта.

В настоящее время у меня есть все jQuery для создания объекта, а затем раздел результатов:

<div id="results"> </div>

Затем в jQuery я вызываю функцию, которая добавляется к тегу div:

var div = $("<div class='well clearfix'>");
div.append($("<h4>").html(item.name));

Я думаю, что основная проблема заключается в том, как создать тег div таким образом, чтобы я мог легко получить идентификатор объекта после его щелчка и передать его обратно контроллеру.

mrshickadance 04 дек. 2013, в 05:34

Источник

0

Вы пробовали что-нибудь? Сделайте шаг за шагом, а затем спросите, когда вы не можете заставить шаг работать.
Scary Wombat 04 дек. 2013, в 04:29
1

попробуй data- атрибуты, прочитай методом jquery data()
charlietfl 04 дек. 2013, в 04:31
0

спасибо за метод data () тоже ... Я изначально думал, что это для получения по какой-то причине, и никогда не видел, чтобы его можно было использовать для хранения данных вместе с элементом.
mrshickadance 04 дек. 2013, в 05:13

Показать ещё 1 комментарий

Теги:

jquery

html

asp.net-mvc-4

1 ответ

Ещё вопросы

Вы пробовали что-нибудь? Сделайте шаг за шагом, а затем спросите, когда вы не можете заставить шаг работать.
попробуй data- атрибуты, прочитай методом jquery data()
спасибо за метод data () тоже ... Я изначально думал, что это для получения по какой-то причине, и никогда не видел, чтобы его можно было использовать для хранения данных вместе с элементом.

Arun P Johny · Accepted Answer · 2013-12-04T03-06-00.000Z

Используйте data() для хранения идентификатора элемента и делегирования события для обработки события click

var $div = $('<div />', {
    'class': 'well clearfix item'
}).data('id', item.id);
$('<h4 />', {
    'html': item.name
}).appendTo($div);
//more contents

$div.appendTo('#results');

для обработки события click (необходимо сделать в обработчике dom)

$('#results').on('click', '.item', function () {
    var id = $(this).data('id');
    console.log('id:', id)
})

Огромное спасибо, это сработало невероятно.