Question

我有这个div，类名为'item'，我想让它可点击并重定向到包含书籍详细信息的页面，但点击事件没有发生。

 <div id="results">
        <ul class="contents">
            <li>
                <div id="1" class="item">
                    <div class="center">1. </div>
                    <div class="center"><strong>ABook</strong></div>
                    <div class="center">Description</div>
                </div>
            </li>
            <li>
                <div id="2" class="item">
                    <div class="center">2. </div>
                    <div class="center"><strong>BBook</strong></div>
                    <div class="center">Description</div>
                </div>
            </li>
            <li>
                <div id="3" class="item">
                    <div class="center">3. </div>
                    <div class="center"><strong>CBook</strong></div>
                    <div class="center">Description</div>
                </div>
            </li>
        </ul>
        <div align="center">
            <ul class="pagen">
                <li class="first active">1</li>
                <li><a href="#" data-page="2" title="Page 2">2</a></li>
                <li><a href="#" data-page="3" title="Page 3">3</a></li>
                <li><a href="#" data-page="4" title="Next">&gt;</a></li>
                <li class="last"><a href="#" data-page="4" title="Last">»</a></li>
            </ul>
        </div>
    </div>

Javascript代码 -

$(document).ready(function() {
$(".item").click(function(e){ 
        var id = $(this).attr("id");
 });
});

我在<a>内的<div>标记处尝试了点击事件，但没有效果。我确定javascript文件正在加载。任何帮助将不胜感激。

Answer 1

将您的代码包装在运行时函数中。也省略了返回false：

$(document).ready(function(){
 $(".item").click(function(e){ 
        var id = $(this).attr("id");
        //code to open new window or change window location according to ID
 });

});

Answer 2

 <div id="results">
    <ul class="contents">
        <li>
            <a href="your link"><div id="1" class="item">
                <div class="center">1. </div>
                <div class="center"><strong>ABook</strong></div>
                <div class="center">Description</div>
            </div></a>
        </li>
        <li>
            <div id="2" class="item">
                <div class="center">2. </div>
                <div class="center"><strong>BBook</strong></div>
                <div class="center">Description</div>
            </div>
        </li>
        <li>
            <div id="3" class="item">
                <div class="center">3. </div>
                <div class="center"><strong>CBook</strong></div>
                <div class="center">Description</div>
            </div>
        </li>
    </ul>
    <div align="center">
        <ul class="pagen">
            <li class="first active">1</li>
            <li><a href="#" data-page="2" title="Page 2">2</a></li>
            <li><a href="#" data-page="3" title="Page 3">3</a></li>
            <li><a href="#" data-page="4" title="Next">&gt;</a></li>
            <li class="last"><a href="#" data-page="4" title="Last">»</a></li>
        </ul>
    </div>
</div>

下面＆＃39;试试这个。我把标签放在div的外面。

Answer 3

试试这个

$(document).ready(function(){
    $(".item").click(function(){
        $(this).hide();
    });
});

Answer 4

我没有看到使用div导航到不同页面的任何优势，除非您想要进行一些预处理然后导航。我已经添加了警报，因为您提到点击事件根本没有发生。

在这种情况下，您可能需要通过data属性添加链接，在click处理程序中，您必须使用window.location.href导航到该页面。

$(document).ready(function() {
$(".item").click(function(e){ 
    var id = $(this).attr("id"),
        href = $(this).data("link");
    alert("id : "+id);
   
    window.location.href= href;
 });
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.js"></script>
<div id="results">
    <ul class="contents">
        <li>
            <div id="1" class="item" data-link="http://www.google.com">
                <div class="center">1. </div>
                <div class="center"><strong>ABook</strong></div>
                <div class="center">Description</div>
            </div>
        </li>
        <li>
            <div id="2" class="item"  data-link="http://www.google.com">
                <div class="center">2. </div>
                <div class="center"><strong>BBook</strong></div>
                <div class="center">Description</div>
            </div>
        </li>
        <li>
            <div id="3" class="item" data-link="http://www.google.com">
                <div class="center">3. </div>
                <div class="center"><strong>CBook</strong></div>
                <div class="center">Description</div>
            </div>
        </li>
    </ul>
    <div align="center">
        <ul class="pagen">
            <li class="first active">1</li>
            <li><a href="#" data-page="2" title="Page 2">2</a></li>
            <li><a href="#" data-page="3" title="Page 3">3</a></li>
            <li><a href="#" data-page="4" title="Next">&gt;</a></li>
            <li class="last"><a href="#" data-page="4" title="Last">»</a></li>
        </ul>
    </div>
</div>

对于导航，我希望使用div标记包装anchor并将click事件绑定到该标记。

div click不起作用

4 个答案: