Question

Probably a simple question, but here goes.

I have a legend on my map that contains some checkboxes when I mouseover it.
I want to turn some of the elements inside the legend into jquery buttons. For example, $(“#unions”).button(); However, I can’t seem to access the elements inside the legend.

How would I do this? I have all the jquery files in my code, so that’s not the problem.

var legend = '<ul>'
                       + '<li>   <b>            Organization Type:                  </b><li>'
                       + '<li> <input type="checkbox" id="unions" /> Unions '
                       + '&nbsp &nbsp &nbsp <input type="checkbox" name="radio" id="nonunions" /> Non-Unions </li>'
                       +'<li>    <b>            Sectors (Union and Non-Union):      </b> <li>'
                       + '<li class="item"><input type="checkbox" name="radio" id = "agriculture" /> Agriculture</li>'
                       + '<li class="item"><input type="checkbox" name="radio" id = "processing" /> Food Processing</li>'
                       + '<li class="item"><input type="checkbox" name="radio" id = "warehouse"/> Warehouse</li>'
                       + '<li class="item"><input type="checkbox" name="radio" id = "retail" /> Retail</li>'
                       + '<li class="item"><input type="checkbox" name="radio" id = "food" /> Food Service</li>'
                       + '<li>    <b>           Non-Union Organization Type:            </b> <li>'
                       + '<li class="item"><input type="checkbox" name="radio" id="advocacy" = "adv"/> Advocacy</li>'
                       + '<li class="item"><input type="checkbox" name="radio" id = "service"/> Service</li>'
                       + '<li class="item"><input type="checkbox" name="radio" id = "workcenter" /> Work Center</li>'
                       + '</ul>';

$(controlLegend).html(legend);

Answer 1

$("#unions").button(); wouldn’t work if controlLegend wasn’t part of the DOM. You can use .find() to get to the element inside of controlLegend.

$(controlLegend).find("#unions").button();