我似乎无法解决这个问题。
我有一组单选按钮，点击每个按钮，我正在使用不同的数据填充下拉列表（引导程序下拉列表）。点击下拉列表，我选择顶部的文字。代码工作正常，直到我没有选择不同的单选按钮。一旦我点击单选按钮并重新填充第一个下拉列表，点击事件就会停止触发.....任何想法都会有所帮助。这是我的简化代码：
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<style>
body{overflow-y:scroll}input.search-text{height:30px}ul.listBig{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.listSmall{list-style-type:none;margin:0;padding:0;width:26%;float:left;text-align:left}ul.listBig li{display:inline-block;width:24%;margin:0 0 20px;padding:0}ul.listSmall li{display:block;margin:0 0 8px;padding:0}ul.listSmall li a{font-family:Calibri,"Open Sans",sans-serif;font-size:1.1em;color:#e1e1e1}ul.listSmall li a:hover{text-decoration:underline}div.listBigDiv{width:200px;height:230px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA}div.listBigDiv img{width:200px;height:200px}div.listBigDiv a{line-height:20px;font-weight:700;color:#606b7a}div.listSection{width:100%;padding:20px 0;text-align:center;background:#efefef;border-bottom:1px solid #dbdbdb}div.listSection.light{background:#f7f7f7}div.listSection h2{font-family:Calibri,"Open Sans",sans-serif;font-size:2.5em;margin-bottom:.3em;font-weight:700}a.bttn.custom{font-size:1.3em;height:54px;font-weight:700;line-height:40px}a.bttn.custom:hover{text-decoration:none;color:#fbfbfb}p.textBig{font-family:Calibri,"Open Sans",sans-serif;font-size:1.4em;color:#e1e1e1}p.sectionDesc{font-family:Calibri,"Open Sans",sans-serif;font-size:1.3em;text-align:center;color:#393c3d;margin-top:0;margin-bottom:30px;width:60%;margin-left:20%}h1.definition{position:relative;margin-bottom:20px}div.elemContainer{position:relative;top:0}a.feedbackBox{border:1px solid #e1e1e1;padding:5px;text-decoration:none}.popupCollectionBackground{z-index:10;background:rgba(0,0,0,.8);height:100%;width:100%;position:absolute;top:0}.popupCollection{z-index:11;background:rgba(255,255,255,.99);overflow-y:scroll;height:96%;width:80%;position:absolute;top:4%;left:10%;box-sizing:border-box;border:1px solid #F86960}h2.collectionName{margin:0;text-align:center;position:relative;top:30%;font-family:Calibri;font-size:3em;color:#fff;text-shadow:2px 2px #333}ul.collectionList{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.collectionList li{display:inline-block;width:32%;margin:0 0 20px;padding:0}div.listCollection{width:90%;height:290px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA;text-align:center}div.listCollection img{width:100%;height:250px}div.listCollection a{line-height:25px;font-weight:700;color:#606b7a}img.mediaImage{margin:0 10px 20px}a.connectText:hover{text-decoration:none!important}#popupCollectionBackgroundImage{height:40%;width:100%;margin-bottom:20px;}.btn-group .btn img,.dropdown-menu li a img{height:25px;margin-right:7px}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
// The functions to be executed on loading the document
$(function () {
$(window).trigger('scroll');
$("body").scroll(function () { $(window).trigger('scroll'); });
$(document).on('click', 'a', function (e) {
if ('#' == $(this).attr('href'))
e.preventDefault();
});
$(".dropdown-menu li a").click(function (e) {
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
$('input[name=exploreOrWeekend]:radio').change(function () {
switchExploreWeekend($('input[name=exploreOrWeekend]:radio:checked').val());
});
$(".btn-group button").each(function () {
$(this).css("min-width", $(this).width() + 40 + "px");
});
});
</script>
<script>
function switchExploreWeekend(sectionURL) {
if (sectionURL == "/explore") {
var regionButtonHtml = 'Anywhere in India <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#exploreRegionHtml").html());
}
else {
var regionButtonHtml = 'Near Me... <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#weekendRegionHtml").html());
}
}
$("#regionDropdown li a").click(function (e) {
alert('b');
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
</script>
</head>
<body style="margin: 0px;">
<div id="container" style="width: 100%; height: 100%;">
<div class="searchBg">
<div style="position: relative; top: 28%; width: 100%; text-align: center;">
<h1 class="definition">Discover Your Next Holiday Destination</h1>
<div class="elemContainer">
<label class="radio">
<input type="radio" name="exploreOrWeekend" checked="checked" value="/explore" />
Explore All Destinations
</label>
<label class="radio">
<input type="radio" name="exploreOrWeekend" class="second" value="/weekend-getaways" />
Find Weekend Getaways
</label>
<br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="regionButton" style="min-width: 220px">
Anywhere in World <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="regionDropdown">
<li><a href="#" data-region="ANYWHERE">Anywhere in World</a></li>
<li><a href="#" data-region="America">North America</a></li>
<li><a href="#" data-region="europe">Europe</a></li>
<li><a href="#" data-region="asia">Asia</a></li>
<li><a href="#" data-region="australia">Australia</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="categoryButton" style="min-width: 220px">
All Places<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="categoryDropdown">
<li><a href="#" data-categorycode="all">All Places</a></li>
<li><a href="#" data-categorycode="beaches">Beaches</a></li>
<li><a href="#" data-categorycode="deserts">Deserts</a></li>
<li><a href="#" data-categorycode="wildlife">Wildlife</a></li>
<li><a href="#" data-categorycode="heritage">Heritage</a></li>
<li><a href="#" data-categorycode="adventure">Adventure</a></li>
</ul>
</div>
<button type="button" class="btn bttn custom btn-default" id="goButton" onclick="showPage()">
Find Destinations
</button>
</div>
</div>
</div>
<div id="exploreRegionHtml" style="display: none;">
<li><a href="#" data-region="ANYWHERE">Anywhere in World</a></li>
<li><a href="#" data-region="America">North America</a></li>
<li><a href="#" data-region="europe">Europe</a></li>
<li><a href="#" data-region="asia">Asia</a></li>
<li><a href="#" data-region="australia">Australia</a></li>
</div>
<div id="weekendRegionHtml" style="display: none;">
<li><a href="#" data-region="NEARME">Near Me...</a></li>
<li><a href="#" data-region="/from-london.html">London</a></li>
<li><a href="#" data-region="/from-delhi.html">Delhi</a></li>
<li><a href="#" data-region="/from-sydney.html">Sydney</a></li>
<li><a href="#" data-region="/from-nyc.html">New York</a></li>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
感谢你们的想法。事实上，使用.html（）调用DOM刷新并且所有事件都会丢失。根据您的建议，我更改为代码以重新附加事件处理程序，它工作正常！以下是可能面临类似问题的任何人的代码。
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" />
<style>
body{overflow-y:scroll}input.search-text{height:30px}ul.listBig{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.listSmall{list-style-type:none;margin:0;padding:0;width:26%;float:left;text-align:left}ul.listBig li{display:inline-block;width:24%;margin:0 0 20px;padding:0}ul.listSmall li{display:block;margin:0 0 8px;padding:0}ul.listSmall li a{font-family:Calibri,"Open Sans",sans-serif;font-size:1.1em;color:#e1e1e1}ul.listSmall li a:hover{text-decoration:underline}div.listBigDiv{width:200px;height:230px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA}div.listBigDiv img{width:200px;height:200px}div.listBigDiv a{line-height:20px;font-weight:700;color:#606b7a}div.listSection{width:100%;padding:20px 0;text-align:center;background:#efefef;border-bottom:1px solid #dbdbdb}div.listSection.light{background:#f7f7f7}div.listSection h2{font-family:Calibri,"Open Sans",sans-serif;font-size:2.5em;margin-bottom:.3em;font-weight:700}a.bttn.custom{font-size:1.3em;height:54px;font-weight:700;line-height:40px}a.bttn.custom:hover{text-decoration:none;color:#fbfbfb}p.textBig{font-family:Calibri,"Open Sans",sans-serif;font-size:1.4em;color:#e1e1e1}p.sectionDesc{font-family:Calibri,"Open Sans",sans-serif;font-size:1.3em;text-align:center;color:#393c3d;margin-top:0;margin-bottom:30px;width:60%;margin-left:20%}h1.definition{position:relative;margin-bottom:20px}div.elemContainer{position:relative;top:0}a.feedbackBox{border:1px solid #e1e1e1;padding:5px;text-decoration:none}.popupCollectionBackground{z-index:10;background:rgba(0,0,0,.8);height:100%;width:100%;position:absolute;top:0}.popupCollection{z-index:11;background:rgba(255,255,255,.99);overflow-y:scroll;height:96%;width:80%;position:absolute;top:4%;left:10%;box-sizing:border-box;border:1px solid #F86960}h2.collectionName{margin:0;text-align:center;position:relative;top:30%;font-family:Calibri;font-size:3em;color:#fff;text-shadow:2px 2px #333}ul.collectionList{list-style-type:none;margin:0 0 0 10%;padding:0;width:80%}ul.collectionList li{display:inline-block;width:32%;margin:0 0 20px;padding:0}div.listCollection{width:90%;height:290px;margin:0 auto;box-shadow:1px 1px 3px #888;border:1px solid #AAA;text-align:center}div.listCollection img{width:100%;height:250px}div.listCollection a{line-height:25px;font-weight:700;color:#606b7a}img.mediaImage{margin:0 10px 20px}a.connectText:hover{text-decoration:none!important}#popupCollectionBackgroundImage{height:40%;width:100%;margin-bottom:20px;}.btn-group .btn img,.dropdown-menu li a img{height:25px;margin-right:7px}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script>
$(function () {
$(window).trigger('scroll');
$("body").scroll(function () { $(window).trigger('scroll'); });
$(document).on('click', 'a', function (e) {
if ('#' == $(this).attr('href'))
e.preventDefault();
});
bindClick();
$('input[name=exploreOrWeekend]:radio').change(function () {
switchExploreWeekend($('input[name=exploreOrWeekend]:radio:checked').val());
});
$(".btn-group button").each(function () {
$(this).css("min-width", $(this).width() + 40 + "px");
});
});
function bindClick() {
//unbind all event handlers - for safety sake, usually removed by html() call
$(".dropdown-menu li a").unbind();
//bind again
$(".dropdown-menu li a").click(function (e) {
$(this).parent().parent().select("li a").each(function () { $(this).attr("data-selected", "no"); });
$(this).attr("data-selected", "yes");
$(this).parent().parent().parent()
.find("button").html($(this).html() + ' <span class="caret"></span>');
});
}
function switchExploreWeekend(sectionURL) {
if (sectionURL == "/explore") {
var regionButtonHtml = '<img src="images/filter_logos/icon-compass.png" class="filterIcon" />' +
'Anywhere in India <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#exploreRegionHtml").html());
}
else {
var regionButtonHtml = '<img src="images/filter_logos/icon-compass.png" class="filterIcon" />' +
'Near Me... <span class="caret"></span>';
$("#regionButton").html(regionButtonHtml);
$("#regionDropdown").html($("#weekendRegionHtml").html());
}
bindClick();
}
</script>
</head>
<body style="margin: 0px;">
<div id="container" style="width: 100%; height: 100%;">
<div class="searchBg">
<div style="position: relative; top: 28%; width: 100%; text-align: center;">
<h1 class="definition">Discover Your Next Holiday Destination</h1>
<div class="elemContainer">
<label class="radio">
<input type="radio" name="exploreOrWeekend" checked="checked" value="/explore" />
Explore All Destinations
</label>
<label class="radio">
<input type="radio" name="exploreOrWeekend" class="second" value="/weekend-getaways" />
Find Weekend Getaways
</label>
<br />
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="regionButton" style="min-width: 220px">
Anywhere in World <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="regionDropdown">
<li><a href="#" data-region="ANYWHERE">Anywhere in World</a></li>
<li><a href="#" data-region="America">North America</a></li>
<li><a href="#" data-region="europe">Europe</a></li>
<li><a href="#" data-region="asia">Asia</a></li>
<li><a href="#" data-region="australia">Australia</a></li>
</ul>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" id="categoryButton" style="min-width: 220px">
All Places<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" id="categoryDropdown">
<li><a href="#" data-categorycode="all">All Places</a></li>
<li><a href="#" data-categorycode="beaches">Beaches</a></li>
<li><a href="#" data-categorycode="deserts">Deserts</a></li>
<li><a href="#" data-categorycode="wildlife">Wildlife</a></li>
<li><a href="#" data-categorycode="heritage">Heritage</a></li>
<li><a href="#" data-categorycode="adventure">Adventure</a></li>
</ul>
</div>
<button type="button" class="btn bttn custom btn-default" id="goButton" onclick="showPage()">
Find Destinations
</button>
</div>
</div>
</div>
<div id="exploreRegionHtml" style="display: none;">
<li><a href="#" data-region="ANYWHERE">Anywhere in World</a></li>
<li><a href="#" data-region="America">North America</a></li>
<li><a href="#" data-region="europe">Europe</a></li>
<li><a href="#" data-region="asia">Asia</a></li>
<li><a href="#" data-region="australia">Australia</a></li>
</div>
<div id="weekendRegionHtml" style="display: none;">
<li><a href="#" data-region="NEARME">Near Me...</a></li>
<li><a href="#" data-region="/from-london.html">London</a></li>
<li><a href="#" data-region="/from-delhi.html">Delhi</a></li>
<li><a href="#" data-region="/from-sydney.html">Sydney</a></li>
<li><a href="#" data-region="/from-nyc.html">New York</a></li>
</div>
</div>
</body>
</html>