Обработка входов из нескольких элементов на странице

Question

Мне нужно найти способ эффективно обрабатывать нажатия кнопок на моей веб-странице Django. В настоящее время у меня есть каждая кнопка присваивается уникальный идентификатор, и я вызываю функцию JS для обработки кликов:

< button id="id1_element1" onclick="bhandler(this.id)" /> 

Затем в JQuery я анализирую кнопку, которая отстреливается на bhandler и предпринять соответствующие действия на стороне сервера с помощью Ajax вызова. Проблема с этим подходом заключается в том, что у меня много элементов, и каждое событие имеет много идентификаторов. Было бы громоздко называть каждую кнопку вручную, а затем обрабатывать этот вход в JS.

Есть ли эффективный способ решения этой проблемы без написания большого количества кода вручную? Является ли jquery/ajax правильным инструментом? В наши дни, похоже, так много инфраструктур JS, что я чувствую, что для этого должен быть один решатель.

Answer 1

Прежде всего, запись обработчика событий в элемент является плохой практикой. Вы должны написать обработчик событий в файле javascript.

Во-вторых, если вы хотите иметь один обработчик для нескольких элементов, вы можете использовать селектор классов вместо ID. Примечание. Я использую собственный javascript для этой демонстрации.

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

var blocks = document.querySelectorAll(".block"); 
 

 
// loop blocks nodelist 
 
blocks.forEach(function(block){ 
 
\t 
 
    // event listener 
 
    block.addEventListener("click", function(){ 
 
\t \t 
 
    // if this element has element-1 class 
 
    if(this.classList.contains("element-1")){ 
 
    \t alert("hey, i'm element 1"); 
 
    } 
 
    
 
    // if this element has element-2 class 
 
    if(this.classList.contains("element-2")){ 
 
    \t alert("hey, i'm element 2"); 
 
    } 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 

 
.block { 
 
    border: 1px solid #000; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    background: #fff; 
 
}

<ul> 
 
    <li class="block element-1">Element 1</li> 
 
    <li class="block element-2">Element 2</li> 
 
</ul>