jQuery - Dynamic Selector, not sure why its not firing.

Question

Below is a static example of me triggering the scroll event.
It will alert the 'Dynamic Selector', the alert result in this case is:

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

(That's right its the same as the static select ive typed in the example below)

$("#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");
});

I will now take the contents of the alert(); and use it as a dynamic selector, how ever it does not fire when i scroll the same scroll bars.
(Please note, the value of the selector below is exactly the same as the static one used in the example above.)

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

..A Bit more detail about the way it all works;
I have 2 divs side by side, There is a top navigation bar+buttons which controls if the left div, these control the content of the left div.
By default the first sub menu(populated by left's contents(controled by the top nav bar)) option is selected. This sub menu selection controls the content of the right div.(right content loads via ajax)

Im using .html(data); to add the contents into the right div. Within the contents is jquery and html code.

The above code issue is loaded at this point, when the right divs' contents is loaded.
Examples of things i need to match with one selector(dynamically)

#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

At this stage, the issue was, it would select the first result by default and nothing else, in this case it would match:

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

and not match

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

even once i have #AZ-List as the matching result(via alerting the selector in chrome console) The solution i will most likely be taking to this issue, will be having a hidden input that will hold the value of the sub menu's text(.html()), and going from there.

Answer 1

The only thing i can think of, is that the dynamic selector contents are affected by the actual scroll.

Try putting the selector in a variable and alert it before using it to make sure it is what you want..

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");
});

Does the above alert the selector you want?

Answer 2

I would wonder if there's some invisible character that isn't showing up in the alert.

Perhaps try trimming the text that you're getting via .val() and .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");
});

I'd think you would want to cache the $(".left .active") anyway since you're calling it twice.

Also, in your selector, you have one element ID descending from another. This should be unnecessary since IDs must be unique anyway. There shouldn't be a need to specify the ancestor of the one you want.

So:

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

could be:

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