jQuery .click() 이벤트가 msDropDown 요소에서 실행되지 않음

Question

Adobe Business Catalyst 사이트에서 생성되는 페이지에서 간단한 jQuery를 구현하는 데 문제가 있습니다. 나는 아래의 관련 HTML을 포함 시켰습니다 :

<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> 

페이지가 생성 될 때 다음 HTML이 생성있어 무엇 :

당신이 볼 수 있듯이, msDropDown가 선택 드롭 다운을 변경하고로 돌고

<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> 

순서가없는 목록. .banner-main div에는 배경 이미지가 있으며 드롭 다운 선택에 따라 해당 이미지를 변경하고 싶습니다. 다음 jQuery를 내 첫째, 가장 솔직 시도했지만 작동하지 않았다 :하지만 어떤 이유로, 나는 몇 가지 더 시도했습니다 이후

<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> 

의 .click() 이벤트에 트리거되지 않는 msDropDown에 의해 생성 된 요소 나는 정말 어려움을 겪었습니다. 그래서 어떤 도움이라도 대단히 감사 할 것입니다!

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

문제를 해결 하시겠습니까?