0

这是生成标记。<img/>我需要每个标签上的这个 data-target 属性。我可以没有它。但我不认为这会导致这个问题，因为这件事以前工作得很好。

<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 社区帮助我完成了令人惊奇的事情。

4

3 回答 3

0

它对我来说似乎工作正常：

http://jsfiddle.net/xmHxt/

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

于 2013-08-08T16:35:55.183 回答
0

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

于 2013-08-08T16:36:02.100 回答
0

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

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

于 2013-08-08T16:42:10.457 回答