jquery .on() с динамическим селектором не работает

Question

У меня есть небольшая проблема с использованием .on() с динамическим селектором. Например:

$("#listPlayerHome").on('click', '.classeJoueurEngland', function(){ //My work here }

... работает должным образом. Но если я использую динамический селектор, как это:

$("#listPlayerHome").on('click', '.classeJoueur'+teamHome, function() 

Где «teamHome» содержит «Англия», она не работает вообще.

Answer 1

Это действительно работает, но это произойдет только один раз, когда вызывается метод .on. Если вы ожидаете, что он изменит магию, когда вы измените переменную, это не произойдет.

Если вам нужно, чтобы он был таким динамичным, тогда вы должны перегруппироваться, когда вам нужно изменить значение переменной.

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

var oldTeamHome; 
function attachHandler(teamHome){ 
    if(oldTeamHome) 
     $("#listPlayerHome").off('click', '.classeJoueur'+oldTeamHome, eventFunction); 
    $("#listPlayerHome").on('click', '.classeJoueur'+teamHome, eventFunction); 
    oldTeamHome = teamHome; 
} 

function eventFunction(){ 
    //... 
} 

Таким образом, там, где вы обычно изменить значение teamHome, вы должны использовать вместо этого:

//teamHome = "England"; 
attachHandler("England"); 

---

Если по какой-то шанс, это не то, что вы хотите, и это Infact нЕ работает. Тогда это потому, что вы делаете что-то не так. В этом случае вам необходимо предоставить полный набор кода, который может реплицировать проблему.

Answer 2

Он должен работать, но вы упомянули, что teamHome содержит Англия - может быть, у него есть место заранее? Поэтому, возможно, попробуйте:

$("#listPlayerHome").on('click', '.classeJoueur' + teamHome.trim(), function() 

Answer 3

Это не точное решение для вашего подхода, а еще один способ взглянуть на проблему.

Вы можете использовать Attribute Starts with Selector. Это привяжет привязку события к любому дочернему элементу с классами, начинающимися с «classeJoueur».

$('#listPlayerHome').children('*[class^="classeJoueur"]').on('click', function() { });