Question

这是生成标记。我需要在每个<img/>标记上使用此数据目标属性。我可以没有它。但是我认为这不会导致这个问题，因为这件事以前工作正常。

<ul>
<li class="span3">
        <div class="thumbnail item">
            <div class="image"><img src="http://dummy_link/" alt=""></div>
            <div class="info">
                <a href="http://dummy_link/" target="_blank">
                <div class="sub-title">Va</div></a>
                <hr class="divider">
                <div class="cost">365</div>
                <img alt="click_here" onclick="$.hanger_click_handler()" class="span2 pull-right logo-right visible-desktop visible-tablet hang" src="/static/img/hanger.svg" data-target="http://dummy_link/">
            </div>
        </div>
    </li>
<li class="span3">
        <div class="thumbnail item">
            <div class="image"><img src="http://dummy_link/" alt=""></div>
            <div class="info">
                <a href="http://dummy_link/" target="_blank">
                <div class="sub-title">Va</div></a>
                <hr class="divider">
                <div class="cost">365</div>
                <img alt="click_here" onclick="$.hanger_click_handler()" class="span2 pull-right logo-right visible-desktop visible-tablet hang" src="/static/img/hanger.svg" data-target="http://dummy_link/">
            </div>
        </div>
</li>
</ul>

这是jquery代码，我很肯定它包含在jquery(document).ready(function(){});

中

$.hanger_click_handler = function(ev) {
    ev.preventDefault();
    console.log("hang lcick");
}   

$('img.hang').on('click', $.hanger_click_handler);

我甚至可以看到使用$._data($('img.hang')[0], 'events').click[0].handler在控制台中映射此功能但是当我单击图像时，我在控制台中看不到任何内容。我哪里错了？这之前工作正常。我尝试使用<img/>代码切换<div>代码，但仍无效。看起来之前没有其他人有这个问题。太糟了。任何帮助将不胜感激。谢谢！

更新：好的，我们发现了问题。我最近将z-index: -1放在.thumbnail的样式定义中。我需要它，因为项目与菜单栏重叠。无论如何我可以解决这个z-index问题？我尝试了很多组合，例如给菜单栏指定z-index为2000，并给这个<ul>标签指定z-index为2.但到目前为止它还没有用。我的理解是z-index较高的元素会超过z-index较低的元素。还有其他我需要知道的事情吗？并感谢您节省时间来提供帮助！ SO社区帮助我做了令人惊奇的事情，直到约会。

Answer 1

对我来说似乎工作正常：

http://jsfiddle.net/xmHxt/

您不需要onclick属性并通过jQuery（使用.on方法）连接事件处理程序。只需选择一个，并选择jQuery将JavaScript放入标记中。

Answer 2

$('img.hang').on('click', $.hanger_click_handler);将此更改为$('body').on('click', 'img.hang', $.hanger_click_handler);，如果您要动态生成元素，请尝试$('img.hang').bind('click', $.hanger_click_handler);

Answer 3

你可以这样做并提高你的表现：

HTML删除onclick

<ul>
<li class="span3">
        <div class="thumbnail item">
            <div class="image"><img src="http://dummy_link/" alt=""></div>
            <div class="info">
                <a href="http://dummy_link/" target="_blank">
                <div class="sub-title">Va</div></a>
                <hr class="divider">
                <div class="cost">365</div>
                <img alt="click_here" class="span2 pull-right logo-right visible-desktop visible-tablet hang" src="/static/img/hanger.svg" data-target="http://dummy_link/">
            </div>
        </div>
    </li>
<li class="span3">
        <div class="thumbnail item">
            <div class="image"><img src="http://dummy_link/" alt=""></div>
            <div class="info">
                <a href="http://dummy_link/" target="_blank">
                <div class="sub-title">Va</div></a>
                <hr class="divider">
                <div class="cost">365</div>
                <img alt="click_here" class="span2 pull-right logo-right visible-desktop visible-tablet hang" src="/static/img/hanger.svg" data-target="http://dummy_link/">
            </div>
        </div>
</li>

使用Javascript：

clickHandler = function (e) {
    e.preventDefault();
    console.log('clicked');
}

$('ul').find('img.hang').on('click', clickHandler);

工作示例： JsFiddle

jquery点击不使用图片标签

3 个答案: