jquery load, используя элемент id

Question

Прошу прощения, если это неясно, но у меня возникают проблемы с концептуализацией того, что я хочу делать.

Я использую есть список Див как так

<div id="1" class="ajax_category"> 
    <p> Blah </p> 
    </div> 

Существует Javascript установлен, чтобы сделать запрос AJAX к URL, когда ДИВ идентификатор кнопки. Это прекрасно работает, но мне приходится повторять себя для каждого div на странице. Вот Фрагмент кода JavaScript ...

$('#1').bind('pageAnimationEnd', function(e, ajax_item_1){ 
if (!$(this).data('loaded')) { 
    $(this).append($('<div><img class="loading" src="../../img/loading.gif"><div>'). 
     load('ajax/load_item/1 #ajax_item_1', function() { 
     $(this).parent().data('loaded', true); 
     })); 
     } 
    }); 

Я хотел бы, чтобы каким-то образом изменить этот сценарий, который будет вызван нажатием класса в Div, а затем добавить загрузочную DIV на идентификатор, Div в. Прихватите идентификатор div и сделайте запрос ajax, ссылающийся на идентификатор div в URL-адресе jq 'load'.

Пожалуйста, дайте мне знать, если это неясно или у вас есть другие вопросы.

Спасибо, Peter

Answer 1

Привязать к "div.ajax_category" вместо. Затем используйте идентификатор элемента, который вы получаете в аргументах события. Создание строки вам нужно что-то вроде этого:

var toLoad = "ajax/load_item/" + elementId + " #ajax_item_" + elementId; 

Вы также можете сделать лучше с новыми «делегатом» обработка событий в JQuery. Это позволяет избежать множества затрат, связанных с вызовом «привязки» ко многим элементам.

Answer 2

Вы должны быть в состоянии сделать это с помощью delegate:

$('#container').delegate('.ajax_category','click',function(){ 
    if (!$(this).data('loaded')) { 
     $(this).append(
      $('<div><img class="loading" src="../../img/loading.gif"><div>') 
       .load(
        'ajax/load_item/' + this.id + ' #ajax_item_' + this.id, 
        function() { 
         $(this).parent().data('loaded', true); 
        } 
       ) 
     ); 
    } 
}); 

Обратите внимание, что это предполагает, что элементы с классом ajax_category обернуты в DIV с идентификатором container.

Это имеет значительное преимущество в производительности по сравнению с привязкой к ajax_category, поскольку оно включает только одно связывание, а не несколько. Связывание относительно дорого с точки зрения производительности.