[英]jQuery .click() event not firing on msDropDown elements
I'm having some trouble implementing some simple jQuery in a page being created on an Adobe Business Catalyst site. 我在在Adobe Business Catalyst网站上创建的页面中实现一些简单的jQuery时遇到了一些麻烦。 I've included the relevant HTML below:
我在下面添加了相关的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>
The following HTML is what's generated when the page is created: 以下HTML是创建页面时生成的内容:
<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. 如您所见, msDropDown正在更改选择下拉列表并将其变成无序列表。 The .banner-main div has a background image, and I'd like to change that image depending on the dropdown selection.
.banner-main div具有背景图像,我想根据下拉菜单选择更改该图像。 The following jQuery was my first, most straight-forward attempt, but did not work:
以下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>
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. 此后,我已经尝试了其他几件事,但是无论出于何种原因,msDropDown生成的任何元素都不会触发.click()事件。 I'm quite stumped, so any help would be greatly appreciated!
我很沮丧,所以任何帮助将不胜感激!
$('#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? 解决您的问题?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.