我做了一些谷歌搜索，并认为我可能正在经历所谓的“事件冒泡”，这是我从未听说过的，但对它的存在并不感到惊讶。我希望它只发射一次，我想知道如何解决这个问题。
基本上，我有这个小代码片段：
$('.bggallery_images').click(function () {
alert('test');
});
这应该从php片段中触发一次，该片段基本上添加了来自特定文件夹的每个图像的图像。然后它输出一个回声字符串，其中每个图像都具有“bggallery_images”类。
PHP代码段如下所示：
<?php
$dirname = "img";
$images = scandir($dirname);
$ignore = Array(".", "..");
foreach($images as $file)
{
if(!in_array($file, $ignore))
{
echo "<img class=\"bggallery_images\" src=\"$dirname/$file\" />";
};
}
?>
这会为每个图像生成如下所示的html标记：
<img src="img/WhitePattern6.gif" class="bggallery_images">
这里发生了什么？
这是FireBug的渲染输出：
<div id="gallery_lightbox" style="height: 215px; z-index: 4; display: block;">
<div id="close"></div>
<h2><cufon class="cufon cufon-canvas" alt="Velg " style="width: 39px; height: 20px;"><canvas width="49" height="23" style="width: 49px; height: 23px; top: -4px; left: 0px;"></canvas><cufontext>Velg </cufontext></cufon><cufon class="cufon cufon-canvas" alt="bakgrunnsbilde" style="width: 123px; height: 20px;"><canvas width="129" height="23" style="width: 129px; height: 23px; top: -4px; left: 0px;"></canvas><cufontext>bakgrunnsbilde</cufontext></cufon></h2>
<div class="bggallery_images">testererererer</div>
<img src="img/Bakgrunner/4462-v4.jpg" class="bggallery_images"><img src="img/Bakgrunner/5922.gif" class="bggallery_images"><img src="img/Bakgrunner/BluePattern.gif" class="bggallery_images"><img src="img/Bakgrunner/Brown1.gif" class="bggallery_images"><img src="img/Bakgrunner/Brown2Pattern.jpg" class="bggallery_images"><img src="img/Bakgrunner/BrownPattern.jpg" class="bggallery_images"><img src="img/Bakgrunner/Brownn.gif" class="bggallery_images"><img src="img/Bakgrunner/GrayPattern.gif" class="bggallery_images"><img src="img/Bakgrunner/GreenPattern3.gif" class="bggallery_images"><img src="img/Bakgrunner/OrangePattern.gif" class="bggallery_images"><img src="img/Bakgrunner/PurplePattern.gif" class="bggallery_images"><img src="img/Bakgrunner/PurplePattern2.gif" class="bggallery_images"><img src="img/Bakgrunner/RedPattern3.gif" class="bggallery_images"><img src="img/Bakgrunner/RedPattern4.gif" class="bggallery_images"><img src="img/Bakgrunner/RedPattern5.gif" class="bggallery_images"><img src="img/Bakgrunner/Tiled_Wallpaper__Green_Texture_by_knitetgantt.png" class="bggallery_images"><img src="img/Bakgrunner/WhitePattern4.gif" class="bggallery_images"><img src="img/Bakgrunner/WhitePattern5.gif" class="bggallery_images"><img src="img/Bakgrunner/WhitePattern6.gif" class="bggallery_images"><img src="img/Bakgrunner/WhitePattern7.gif" class="bggallery_images"><img src="img/Bakgrunner/WhitePurple.jpg" class="bggallery_images"><img src="img/Bakgrunner/YellowPattern.gif" class="bggallery_images"><img src="img/Bakgrunner/vintage-wallpaper.jpg" class="bggallery_images">
</div>
编辑：这里基本上是js.js文件。我没有包括kwicks slidemenu脚本。
/* ********************************************** */
/* DOCUMENT READY */
/* ********************************************** */
$(document).ready(function () {
bg_gallery();
});
/* ********************************************** */
/* Background gallery changer */
/* ********************************************** */
function bg_gallery() {
// Sett nytt bakgrunnsbilde i CSSen
var originalBG = $('#wrapper').css('background-image');
$('.bggallery_images').click(function () {
var newBG = "url('" + $(this).attr('src');
var fullpath = $(this).attr('src');
var filename = fullpath.replace('img/Bakgrunner/', '');
$('#wrapper').css('background-image', newBG);
alert('test');
// Lagre til SQL
/*alert('Test');
$.ajax({
url: 'save_to_db.php', // The url to your function to handle saving to the db
data: filename,
dataType:'Text',
type: 'POST', // Could also use GET if you prefer
success: function(data) {
// Just for testing purposes.
//alert('Background changed to: ' + data);
}
});*/
});
// Få frem galleriet
$('.bggallery_current_image').click(function () {
$('html, body').animate({scrollTop:0}, 'slow');
$('#gallery_lightbox').css('height','215px'); // Sett høyde på lightbox-dings
$('#gallery_lightbox').css('z-index','4'); // Sørg for at boksen er i øverste lag
$('body').append('<div id="bggallery_overlay"></div>');
$('#bggallery_overlay').css('height', $(document).height ());
$('#bggallery_overlay').css('width', $(document).width ());
$('#bggallery_overlay').fadeIn('fast',function(){$('#gallery_lightbox').fadeIn('slow');});
});
$('#close').click(function () {
$('#bggallery_overlay').fadeOut('fast',function(){$("#bggallery_overlay").remove();}); //callback, vent
$('#gallery_lightbox').fadeOut('slow');
});
};
/* ********************************************** */
/* Content loader (swoosh ut-swosh inn) */
/* ********************************************** */
/* Load kun fra dynload-klasser, må wrappe en div f. eks rundt slike a href linker */
$('.dynload').die('click').live('click', function () {
$('#ajaxloader').fadeIn('fast');
$('#ajaxloaderfridge').fadeIn('fast');
var href = this.href + ' #content';
var height_initially = $('#container').height();
$('#content').slideUp('fast', function () {
$('#content').fadeOut('fast');
var height_current = $('#container').height();
$(this).load(href, '', function (data) {
createSlidemenus();
bg_gallery();
$('#ajaxloader').fadeOut('fast');
$('#ajaxloaderfridge').fadeOut('fast');
$("#content").animate({
height: 'show',
opacity: 'show'
}, 'normal');
$('#content').show('fast');
Cufon.replace('h1, h2, h3, h4, .menuwrapper', {
fontFamily: 'advent'
});
});
});
return false;
});
$(createSlidemenus);
function createSlidemenus() {
$('#kontrollpanel .slidepanels').kwicks({
min: 42,
spacing: 3,
isVertical: true,
sticky: true,
event: 'click'
});
}
答案 0 :(得分：0)
请查看以下链接以澄清事件冒泡：http://www.quirksmode.org/js/events_order.html
您可以通过从事件处理程序返回“false”来阻止冒泡：
$('.bggallery_images').click(function () {
alert('test');
return false;
});
编辑：此代码可以在不产生两个警报的情况下工作，因此它必须是外部警报。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<body>
<div id="gallery_lightbox" style="height: 215px; z-index: 4; display: block;">
<div id="close"></div>
<h2>
<cufon class="cufon cufon-canvas" alt="Velg " style="width: 39px; height: 20px;">
<canvas width="49" height="23" style="width: 49px; height: 23px; top: -4px; left: 0px;"></canvas>
<cufontext>Velg</cufontext>
</cufon>
<cufon class="cufon cufon-canvas" alt="bakgrunnsbilde" style="width: 123px; height: 20px;">
<canvas width="129" height="23" style="width: 129px; height: 23px; top: -4px; left: 0px;"></canvas>
<cufontext>bakgrunnsbilde</cufontext>
</cufon>
</h2>
<div class="bggallery_images">testererererer</div>
<img src="http://google.com/images/srpr/nav_logo13.png" class="bggallery_images"/>
<img src="http://google.com/images/srpr/nav_logo13.png" class="bggallery_images"/>
</div>
<script type="text/javascript">
$('.bggallery_images').click(function () {
alert('test');
});
</script>
</body>
</html>
答案 1 :(得分：0)
我已经根据你发布的html和js指令创建了一个测试页面，无法重现你的错误 - 警报只会触发一次。我正在使用它来进行jquery引用：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
这就是最后开始的事情
<script>
$('.bggallery_images').click(function() {
alert('test');
});
</script>
你正在做一些你没有告诉我们的事情，或者萤火虫对你撒谎。 firebug向你展示的html（因为它被解释）可能与页面的物理来源不同。你能发布一个完整的输出示例来证明这个问题吗？
答案 2 :(得分：0)
您可能希望查看jquery .bind（）方法。
以下内容摘自jquery docs页面
Example: Cancel a default action and prevent it from bubbling up by returning false:
$("form").bind("submit", function() { return false; })
Example: Stop an event from bubbling without preventing the default action by
using the .stopPropagation() method.
$("form").bind("submit", function(event) {
event.stopPropagation();
});