jQuery .click() event not firing on msDropDown elements

Question

I'm having some trouble implementing some simple jQuery in a page being created on an Adobe Business Catalyst site. I've included the relevant HTML below:

<div class="banner-main">
  <div class="banner-top">
    <section class="banner">
      <div class="catProdAttributeItem">
        <select id="banner-pic">
          <option value="30644690">Red </option>
          <option value="30791632">Purple </option>
        </select>
      </div>
    </section>
  </div>
</div>

The following HTML is what's generated when the page is created:

<div class="banner-main">
  <div class="banner-top">
    <section class="banner">
      <div class="catProdAttributeItem">
        <div class="ddOutOfVision" id="banner-pic_msddHolder" style="height: 0px; overflow: hidden; position: absolute;">
          <select id="banner-pic" tabindex="-1">
            <option value="30644690">Red </option>
            <option value="30791632">Purple </option>
          </select>
        </div>
        <div class="dd ddcommon borderRadius" id="banner-pic_msdd" tabindex="0" style="width: 422px;">
          <div class="ddTitle borderRadiusTp">
            <span class="divider"></span>
            <span class="ddArrow arrowoff"></span>
            <span class="ddTitleText " id="banner-pic_title">
              <span class="ddlabel">Purple</span>
              <span class="description" style="display: none;"></span>
            </span>
          </div>
          <input id="banner-pic_titleText" type="text" autocomplete="off" class="text shadow borderRadius" style="display: none;">
          <div class="ddChild ddchild_ border shadow" id="banner-pic_child" style="z-index: 1; position: absolute; visibility: visible; height: 59px; top: 40px; display: none;">
            <ul>
              <li class="enabled _msddli_ selected">
                <span class="ddlabel">Red</span>
                <div class="clear"></div>
              </li>
              <li class="enabled _msddli_">
                <span class="ddlabel">Purple</span>
                <div class="clear"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

As you can see, msDropDown is changing the select dropdown and turning it into an unordered list. The .banner-main div has a background image, and I'd like to change that image depending on the dropdown selection. The following jQuery was my first, most straight-forward attempt, but did not work:

<script type="text/javascript">

  var pictureList = [
    'url(images/red.jpg)',
    'url(images/purple.jpg)', ];

  $(document).ready(function(){
    $('li.enabled._msddli_').click(function() {
      alert('clicked');
      var val = $('li.enabled._msddli_.selected').index();
      $('.banner-main').css('background-image', pictureList[val]);
    });
  });
</script>

I've since tried several more things, but for whatever reason, the .click() event is not being triggered on any of the elements generated by msDropDown. I'm quite stumped, so any help would be greatly appreciated!

Answer 1

$('#banner-pic_child').on('click', '.li.enabled._msddli_', function (event) {
      alert('clicked');
      var val = $('li.enabled._msddli_.selected').index();
      $('.banner-main').css('background-image', pictureList[val]);
    });

Resolve your problem?