的 'onClick' 上格的事件时有存在的子元素不会发生

我建立我自己一个新的网站，看起来像这样..的 'onClick' 上格的事件时有存在的子元素不会发生

enter image description here

HTML

<div id="row1"> 
<div class="orange" onClick="itemLoad()"> 
<img src="img/game/wacky.jpg" width="140" /> 
<p><strong>A Day At The Races (2014)</strong><br> 
3 x 8-bit instruments</p> 
</div> 

<div class="blue" onClick="itemLoad()"> 
<img src="img/game/dott.jpg" width="140" /> 
<p><strong>Back to the Mansion! (2013)</strong><br /> 
fl, ob, cl, bsn, xyl, vibes, vln, vla, vlc.</p> 
</div> 

.... etc etc etc.

CSS（除了背景颜色，所有盒子都有相同的CSS）

.orange{ 
width:150px; 
height:150px; 
background:#F90;  
display:inline-block; 
margin:10px; 
cursor:pointer; 
box-shadow:#CCC 4px 4px 4px; 
border-radius: 10px; 
padding:10px; 
font-family:Arial, Helvetica, sans-serif; 
font-size:11px; 
line-height:1.5; 
}

基本上，当你点击其中一个框，它显示了一个内容DIV告诉你关于该段音乐的基础上，这是在该行。

JQuery的

function itemLoad(){ 
if($(event.target).parent().is("#row1")){ 
    $("#row1content").fadeIn("slow"); 
}else if($(event.target).parent().is("#row2")){ 
    $("#row2content").fadeIn("slow"); 
} 
}

这函数在盒子是空的时候工作得很好，但是当它们像图中所示的那样有内容时，该函数仅在我点击填充时运行。我以前从未遇到过这个问题。任何帮助，将不胜感激:)

来源

2014-09-28 ChrisWness

尝试在Firefox你的代码，它会失败。请记住始终通过事件作为参数。 – adeneo 2014-09-28 16:31:13

我认为你的问题是条件if（$（event.target）.parent（）。（“＃row1”））。只有当事件发生在橙色/蓝色div上，而不是任何其子女时，这才会通过。 – 2014-09-28 16:33:03

@adeneo是正确的，尝试你的代码与函数itemLoad（事件）{...} – 2014-09-28 16:33:31

event.target是点击的元素，当你点击一个子元素，这就是event.target是，所以它不是一直给你正确的元素，或右父元素，如event.target不引用事件处理程序绑定的元素，但事件源自的元素。

此外，您正在依赖全球event，这是不是跨浏览器。

你想要做的是使用合适的事件处理程序和this

$('.blue, .orange').on('click', function() { 
    if ($(this).parent().is("#row1")){ 
     $("#row1content").fadeIn("slow"); 
    } else if ($(this).parent().is("#row2")){ 
     $("#row2content").fadeIn("slow"); 
    } 
});

应该注意到，最明确是做一个更加动态的方式，让所有目标元素的同一个班级，然后基于DOM中的索引或位置进行淡入淡出，而不根据父母ID来定位每个元素。

来源

2014-09-28 16:34:21 adeneo

我最终想动态加载内容到基于点击的框的div，即itemLoad （x）{$（div）.load（x +“html）;}我怎样才能适应这个？ – ChrisWness 2014-09-28 16:58:18

不确定，取决于'x'是什么？ – adeneo 2014-09-28 17:01:01

取第一个橙色框，它是'古怪轮子'的作品，所以我想将'wacky.html'加载到内容div中。 itemLoad（'wacky'）; – ChrisWness 2014-09-28 17:03:42

这是我脑子里想的:)

function itemLoad(event) { 
    if ($(event.target).parents().is("#row1")) { 
     $("#row1content").fadeIn("slow"); 
    } else if ($(event.target).parents().is("#row2")) { 
     $("#row2content").fadeIn("slow"); 
    } 
}

来源

2014-09-28 16:39:57

的 'onClick' 上格的事件时有存在的子元素不会发生

回答

相关问题