jQuery - динамический селектор, не уверен, почему он не стреляет

Question

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

#WordPanel #AZ-List div div div.ui-jqgrid-bdiv

(Это точно так жев качестве статического выбора я набрал в приведенном ниже примере)

$("#WordPanel #AZ-List div div div.ui-jqgrid-bdiv").scroll(function() {
    alert("#"+$(".left .active").val()+"Panel #"+$("#"+$(".left .active").val()+" div ul li.CmdActive").html()+" div div div.ui-jqgrid-bdiv");
});

Теперь я возьму содержимое оповещения ();и использовать его как динамический селектор, но когда он прокручивает те же полосы прокрутки, он не срабатывает.(Обратите внимание, что значение селектора ниже точно такое же, как статическое значение, используемое в примере выше.)

$("#"+$(".left .active").val()+"Panel #"+$("#"+$(".left .active").val()+" div ul li.CmdActive").html()+" div div div.ui-jqgrid-bdiv").scroll(function() {
    alert("Working");
});

.. Немного подробнее о том, как все это работает;У меня есть 2 деления рядом, есть верхняя панель навигации + кнопки, которые управляют, если левый div, они управляют содержимым левого div.По умолчанию выбрано первое подменю (заполнено содержимым слева (контролируется верхней панелью навигации)).Этот выбор подменю управляет содержимым правого блока (правый контент загружается через ajax)

Я использую .html (данные);добавить содержимое в правый раздел.Внутри содержимого находится jquery и html-код.

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

#WordPanel #JK-List div div div.ui-jqgrid-bdiv
#WordPanel #AZ-List div div div.ui-jqgrid-bdiv 
#AccountPanel #Password div div div.ui-jqgrid-bdiv 
#AccountPanel #UserName div div div.ui-jqgrid-bdiv

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

#WordPanel #JK-List div div div.ui-jqgrid-bdiv

и не совпадать

#WordPanel #AZ-List div div div.ui-jqgrid-bdiv

даже когда я получаю # AZ-List в качестве результата сопоставления (через оповещение селектора в chrome console) Решение, которое я, скорее всего, приму к этой проблеме, будет иметь скрытый вход, который будет содержатьзначение текста подменю (.html ()) и переход оттуда.

Answer 1

Интересно, есть ли какой-нибудь невидимый персонаж, который не появляется в предупреждении?

Возможно, попробуйте обрезать текст, который вы получаете через .val() и .html().

var val = $.trim( $(".left .active").val() );
var html = $.trim( $("#"+ val +" div ul li.CmdActive").html() );

console.log( val, html ); // check the console to verify the values

$("#"+ val +"Panel #"+ html +" div div div.ui-jqgrid-bdiv").scroll(function() {
    alert("Working");
});

Я думаю, вы все равно захотите кэшировать $(".left .active"), так как вы вызываете его дважды.

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

Итак:

#WordPanel #AZ-List div div div.ui-jqgrid-bdiv

может быть:

#AZ-List div div div.ui-jqgrid-bdiv

Answer 2

Единственное, о чем я могу думать, это то, что на содержимое динамического селектора влияет фактическая прокрутка.

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

var selector = "#"+$(".left .active").val()+"Panel #"+$("#"+$(".left .active").val()+" div ul li.CmdActive").html()+" div div div.ui-jqgrid-bdiv";
alert(selector);
$(selector).scroll(function() {
    alert("Working");
});

Вышеприведенное предупреждает о нужном селекторе?