LINUX.ORG.RU

JavaScript функция для элементов из списка <ol></ol>

 , ,


0

1

Привет, есть вот такой список в HTML

<ol>
    <li>
        <button id="auto_add_page" data-catid="1" data-title="Welcome to Python.org" data-url="https://www.python.org/" class="btn btn-mini btn-primary" type="button">Add</button>
        <strong><a href="https://www.python.org/">Welcome to Python.org</a>
        </strong>
    </li>

    <li>
        <button id="auto_add_page" data-catid="1" data-title="Python (programming language) - Wikipedia, the free ..." data-url="http://en.wikipedia.org/wiki/Python_(programming_language)" class="btn btn-mini btn-primary" type="button">Add</button>
        <strong><a href="http://en.wikipedia.org/wiki/Python_(programming_language)">Python (programming language) - Wikipedia, the free ...</a>
        </strong>
    </li>

    <li>
        <button id="auto_add_page" data-catid="1" data-title="Download Python | Python.org" data-url="https://www.python.org/download" class="btn btn-mini btn-primary" type="button">Add</button>
        <strong><a href="https://www.python.org/download">Download Python | Python.org</a>
        </strong>
    </li>
</ol>

генерируется шаблонизатором, элементов <li> в списке может быть сколько угодно. В каждой строке есть кнопка с id=«auto_add_page» (я могу сделать идентификатор уникальный для каждой кнопки если нужно) и некоторой доп. информацией.

На каждую кнопку вашается JS обработчик, который делает GET запрос с информацией которая вытаскивается из соотвествующего батона (типо AJAX).

сейчас js функция выглядит так

    $('#auto_add_page').click(function() {
    	var catid, title, url;
    	catid = $(this).attr("data-catid");
    	title = $(this).attr("data-title");
    	url = $(this).attr("data-url");
    	$.get('/rango/auto_add_page/', 
    		{catid: catid, title: title, url: url},
    		function(data){
    			$('#pages').html(data);
    		});
    });
Это работает только для первой кнопки. Как сделать так что бы этаже функция была забиндена и на все остальные кнопки. Напрщивается, что у них должны быть уникальные ID, но как тогда описа'ть JS функцию?


В каждой строке есть кнопка с id=«auto_add_page» (я могу сделать идентификатор уникальный для каждой кнопки если нужно)

учим html - value *must* be unique

Как сделать так

<button class="auto_add_page" .......

$('.auto_add_page').click(function() {
dib2 ★★★★★
()

Юзай $.on, id должен быть уникальным. При необходимости могу подробнее глянуть через часа три-четыре.

noomorph
()
Ответ на: комментарий от Cupper

http://jsfiddle.net/gDGfK/10/

Плюс одно исправление:

.data('url') — это просто красивее + плюс по идее юзает свойство <HTMLElement>.dataSet, что идеологически правильнее.

noomorph
()
Ответ на: комментарий от Cupper

Наверное, просто опечатка, но ты там присвоение 'url = ' написал без var — это вынесет переменную в глобальную область видимости, что не самый очевидный побочный эффект.

noomorph
()
Ответ на: комментарий от Cupper

В любом случае, конечный вариант получился вполне годным. :)

Про jQuery можешь просмотреть скринкасты CodeSchool (наверняка и в торрентах они есть) - они ненавязчивые, и во время городских поездок по серии в день удавалось смотреть, прорабатывать. Фундамент это не сделает, но может заполнить какие-то белые пятна.

noomorph
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.