jquery - When a composite component containing JS code is rendered multiple times, JS works only on last component -

i have composite component using primefaces <p:selectonemenu> defined like:

<p:selectonemenu id="inout" onchange="inoutchanged()">   .. </p:selectonemenu> 

i have javascript file included part of component defines inoutchanged() function like

function inoutchanged() {   var inout = $({cc.clientid}:inout);   if(inout.val() == "inc") {     slider.addclass("includedinrange");   } } 

this composite component works fine when there 1 on page. problem need have 4 of them on page. so, when change select of 1 composite component changing slider class of last component. believe because there in effect 4 inoutchanged() functions defined within page.

is there way either scope function or name uniquely won't stomp on each other?

your concrete problem caused because redeclared , reassigned same javascript variable slider in global scope. need move declaration of slider inside function.

redeclaring same function doesn't harm, plain inefficient , not dry. should move function own .js file , use <h:outputscript> include it. jsf include once. then, alter function accordingly take variables arguments.

something this

<h:outputscript library="composite" name="some.js" target="head" /> ... <h:panelgroup id="...">     <p:selectonemenu ... onchange="inoutchanged(this)">         ...     </p:selectonemenu>     ...     <p:slider ... /> </h:panelgroup> 

with inside /resources/composite/some.js (provided /resoruces/composite contains composite component xhtml file)

function inoutchanged(menuelement) {     var $menu = $(menuelement);     if ($menu.val() == "inc") {         $menu.parent().find(".ui-slider").addclass("includedinrange");     } }