Question

这是代码：

jQuery(document).ready(function(){
    jQuery('.post_box').on('click', function(e) { 
        jQuery(this).find(".read_more").trigger("click");
    });  
});

当我点击div post_box时，它会触发一个位于post_box的子div中的链接（弹出greybox），其中包含read_more类，现在它工作正常，但是当我关闭链接greybox时出现问题，然后再次点击div post_box它不起作用，我必须刷新页面才能点击它。

如果我改为使用on（）函数，在第一次单击时它将触发链接并被阻止，我认为它会触发多个链接，因为子div这是HTML代码

<div class="post_box" >
    <div class="post_box_top">
        <div class="post_box_center">
            <div class="post_box_content">

                <div class="post_date">

                </div>
                <div class="post_content">

              <?php   echo   $content_post = get_post(get_the_ID());?>

                </div>
                <div class="post_footer">
                    <a href="<?php the_permalink();?>" title="<?php the_title(); ?>" class="read_more"  rel="gb_pageset[search_sites]"  data-greybox-type="iframe">Read more</a>
               // this the link i should trigger when someone click on the <div class="post_box">   
               </div>
            </div>
        </div>
    </div>
</div>`

http://ec2-107-22-235-75.compute-1.amazonaws.com/请看一下这个带有函数one（）的网站，如果我点击它阻止http://haiders.imcserver.ro/telugu你改为on（）你可以看看第二个案例与on（）在这里。

Answer 1

我不会触发click事件，而是创建一个偶数处理程序（函数）并运行该函数，例如：

$(document).ready(function(){
    var     
    readMoreHandler = function (ev) {
        el = $(this).find(".read_more")
        // open read more for the above element
    };


    $('.post_box').on('click', readMoreHandler);  
});

这样您就没有事件冒泡问题

Answer 2

尝试停止链接上的传播：

$(".read_more").click(function(e){
    e.stopPropagation();
});

$(document).ready(function(){
    $('.post_box').on('click', function(e) { 
        $(this).find(".read_more").click();
    }); 
});

这样，当事件从链接冒泡时，不会触发外部div的事件处理程序。

以下是演示：http://jsfiddle.net/7wFQz/

触发链接的单击事件时，也会在父.post_box上触发事件，从而导致循环

2 个答案: