在jquery中单击父div触发href标记

Question

下面给出了我的HTML代码：

<div id="appoint" class="col-md-12 col-sm-12">
    <div class="row padding-15px non-lunch-p-h">
        <div class="col-md-2 col-sm-2 col-xs-4 text-center"><img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png"></div>
        <div class="col-md-8 col-sm-8 col-xs-10 new-appo-margin">
            <h2><a href="#" data-target="#bring_food4" data-toggle="modal" class="trigger_class">Dallas Allergy and Asthma Center</a></h2>
            <div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="bring_food4" class="modal fade">
                <div role="document" class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body full_div">
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <h1>We found an existing appointment at this office! Would you like to order food for this appointment?</h1>
                                    <div class="row">
                                        <h2 class="pad-left-as">Mon June 06</h2>
                                        <div class="col-md-2 col-sm-2 col-xs-4 text-center">
                                            <img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png">
                                        </div>
                                        <div class="col-md-8">
                                            <h1>Dallas Allergy and Asthma Center</h1>
                                            <h2>Lunch - 9:13AM</h2>
                                            <h2>Sugg. Order Count: 10</h2>
                                        </div>
                                    </div>
                                    <div class="row margin_top">
                                        <div class="col-md-2 col-md-offset-2">
                                            <button aria-label="Close" data-dismiss="modal" class="secondary_btn" type="button">Cancel</button>
                                        </div>
                                        <div class="col-md-2">
                                            <button class="secondary_btn" data-target="#cancel_order4" data-toggle="modal" aria-label="Close" data-dismiss="modal">No</button>
                                        </div>
                                        <div class="col-md-2"><a class="primary_btn" href="http://orphcnul.com/lunch-pro-dev/rep/order/policy/52">Yes</a></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="cancel_order4" class="modal fade">
                <div role="document" class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body full_div">
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <h1>You will need to schedule an appointment before ordering food at this office !</h1>
                                    <div class="row margin_top">
                                        <div class="col-md-2">
                                            <button aria-label="Close" data-dismiss="modal" class="secondary_btn" type="button">No</button>
                                        </div>
                                        <div class="col-md-2"><a class="primary_btn" href="http://orphcnul.com/lunch-pro-dev/rep/order/policy/52">Yes</a></div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <p class="font_p_14 font_24px-color">84/4, 2nd Floor, Shahi Majra, Phase-5, Cellulosics Rd, Phase 3, Sahibzada Ajit Singh Nagar, Punjab 160055</p>
        </div>
        <div class="col-md-2">
            <div class="non-lunch-logo-img text-right">
                <img src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/logo_new-1.png">
            </div>
        </div>
    </div>
    <div class="row padding-15px non-lunch-p-h">
        <div class="col-md-2 col-sm-2 col-xs-4 text-center"><img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png"></div>
        <div class="col-md-8 col-sm-8 col-xs-10 new-appo-margin">

            <h2><a href="#" data-target="#bring_food6" data-toggle="modal" class="trigger_class">Harmony heart center</a></h2>
            <div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="bring_food6" class="modal fade">
                <div role="document" class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body full_div">
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <h1>We found an existing appointment at this office! Would you like to order food for this appointment?</h1>
                                    <div class="row">
                                        <h2 class="pad-left-as">Tue June 14</h2>
                                        <div class="col-md-2 col-sm-2 col-xs-4 text-center">
                                            <img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png">
                                        </div>
                                        <div class="col-md-8">
                                            <h1>Harmony heart center</h1>
                                            <h2>Lunch - 12:00 PM</h2>
                                            <h2>Sugg. Order Count: 12</h2>
                                        </div>
                                    </div>
                                    <div class="row margin_top">
                                        <div class="col-md-2 col-md-offset-2">
                                            <button aria-label="Close" data-dismiss="modal" class="secondary_btn" type="button">Cancel</button>
                                        </div>
                                        <div class="col-md-2">
                                            <button class="secondary_btn" data-target="#cancel_order6" data-toggle="modal" aria-label="Close" data-dismiss="modal">No</button>
                                        </div>
                                        <div class="col-md-2"><a class="primary_btn" href="http://orphcnul.com/lunch-pro-dev/rep/order/policy/61">Yes</a></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="cancel_order6" class="modal fade">
                <div role="document" class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body full_div">
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <h1>You will need to schedule an appointment before ordering food at this office !</h1>
                                    <div class="row margin_top">
                                        <div class="col-md-2">
                                            <button aria-label="Close" data-dismiss="modal" class="secondary_btn" type="button">No</button>
                                        </div>
                                        <div class="col-md-2"><a class="primary_btn" href="http://orphcnul.com/lunch-pro-dev/rep/order/policy/61">Yes</a></div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <p class="font_p_14 font_24px-color">phase 5 Newyork abc, abc 0123</p>
        </div>
        <div class="col-md-2">
            <div class="non-lunch-logo-img text-right">
                <img src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/logo_new-1.png">
            </div>
        </div>
    </div>
    <div class="row padding-15px non-lunch-p-h">
        <div class="col-md-2 col-sm-2 col-xs-4 text-center"><img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png"></div>
        <div class="col-md-10 col-sm-10 col-xs-12 new-appo-margin">
            <h2><a href="http://orphcnul.com/lunch-pro-dev/rep/policy/index/24">Aaberg MD</a></h2>
            <p class="font_p_14 font_24px-color">84/4, 2nd Floor, Shahi Majra, Phase-5, 234234</p>
        </div>
    </div>
    <div class="row padding-15px non-lunch-p-h">
        <div class="col-md-2 col-sm-2 col-xs-4 text-center"><img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png"></div>
        <div class="col-md-10 col-sm-10 col-xs-12 new-appo-margin">

            <h2><a href="#" data-target="#bring_food31" data-toggle="modal">Dhayan singh</a></h2>
            <div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="bring_food31" class="modal fade">
                <div role="document" class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body full_div">
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <h1>We found an existing appointment at this office! Would you like to order food for this appointment?</h1>
                                    <div class="row">
                                        <h2 class="pad-left-as">Tue July 05</h2>
                                        <div class="col-md-2 col-xs-0 col-sm-2">
                                            <img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png">
                                        </div>
                                        <div class="col-md-8">
                                            <h1>Dhayan singh</h1>
                                            <h2>Dinner - 1:00pm</h2>
                                            <h2>Sugg. Order Count: 0</h2>
                                        </div>
                                    </div>
                                    <div class="row margin_top">
                                        <div class="col-md-2 col-md-offset-2">
                                            <button aria-label="Close" data-dismiss="modal" class="close" type="button">Cancel</button>
                                        </div>
                                        <div class="col-md-2">
                                            <button class="secondary_btn" data-target="#cancel_order31" data-toggle="modal">No</button>
                                        </div>
                                        <div class="col-md-2"><a class="primary_btn" href="http://orphcnul.com/lunch-pro-dev/rep/order/policy/29">Yes</a></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="cancel_order31" class="modal fade">
                <div role="document" class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body full_div">
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <h1>You will need to schedule an appointment before ordering food at this office !</h1>
                                    <div class="row margin_top">
                                        <div class="col-md-2">
                                            <button aria-label="Close" data-dismiss="modal" class="close" type="button">No</button>
                                        </div>
                                        <div class="col-md-2"><a class="primary_btn" href="http://orphcnul.com/lunch-pro-dev/rep/order/policy/29">Yes</a></div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <p class="font_p_14 font_24px-color">84/4, 2nd Floor, Shahi Majra, Phase-5, 234234</p>
        </div>
    </div>
    <div class="row padding-15px non-lunch-p-h">
        <div class="col-md-2 col-sm-2 col-xs-4 text-center"><img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png"></div>
        <div class="col-md-10 col-sm-10 col-xs-12 new-appo-margin">
            <h2><a href="http://orphcnul.com/lunch-pro-dev/rep/policy/index/33">Dhayan singh mola</a></h2>
            <p class="font_p_14 font_24px-color">84/4, 2nd Floor, Shahi Majra, Phase-5, 234234</p>
        </div>
    </div>
    <div class="row padding-15px non-lunch-p-h">
        <div class="col-md-2 col-sm-2 col-xs-4 text-center"><img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png"></div>
        <div class="col-md-10 col-sm-10 col-xs-12 new-appo-margin">
            <h2><a href="http://orphcnul.com/lunch-pro-dev/rep/policy/index/42">test</a></h2>
            <p class="font_p_14 font_24px-color">test 5455</p>
        </div>
    </div>
    <div class="row padding-15px non-lunch-p-h">
        <div class="col-md-2 col-sm-2 col-xs-4 text-center"><img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png"></div>
        <div class="col-md-8 col-sm-8 col-xs-10 new-appo-margin">

            <h2><a href="#" data-target="#bring_food9" data-toggle="modal" class="trigger_class">Chaitanya hospital all hospital facilities</a></h2>
            <div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="bring_food9" class="modal fade">
                <div role="document" class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body full_div">
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <h1>We found an existing appointment at this office! Would you like to order food for this appointment?</h1>
                                    <div class="row">
                                        <h2 class="pad-left-as">Wed June 08</h2>
                                        <div class="col-md-2 col-sm-2 col-xs-4 text-center">
                                            <img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png">
                                        </div>
                                        <div class="col-md-8">
                                            <h1>Chaitanya hospital all hospital facilities</h1>
                                            <h2>Lunch - 12:30pm</h2>
                                            <h2>Sugg. Order Count: 0</h2>
                                        </div>
                                    </div>
                                    <div class="row margin_top">
                                        <div class="col-md-2 col-md-offset-2">
                                            <button aria-label="Close" data-dismiss="modal" class="secondary_btn" type="button">Cancel</button>
                                        </div>
                                        <div class="col-md-2">
                                            <button class="secondary_btn" data-target="#cancel_order9" data-toggle="modal" aria-label="Close" data-dismiss="modal">No</button>
                                        </div>
                                        <div class="col-md-2"><a class="primary_btn" href="http://orphcnul.com/lunch-pro-dev/rep/order/policy/68">Yes</a></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <div aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="cancel_order9" class="modal fade">
                <div role="document" class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button aria-label="Close" data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span></button>
                        </div>
                        <div class="modal-body full_div">
                            <div class="row">
                                <div class="col-md-12 col-sm-12">
                                    <h1>You will need to schedule an appointment before ordering food at this office !</h1>
                                    <div class="row margin_top">
                                        <div class="col-md-2">
                                            <button aria-label="Close" data-dismiss="modal" class="secondary_btn" type="button">No</button>
                                        </div>
                                        <div class="col-md-2"><a class="primary_btn" href="http://orphcnul.com/lunch-pro-dev/rep/order/policy/68">Yes</a></div>
                                    </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
            <p class="font_p_14 font_24px-color">84/4, 2nd Floor, Shahi Majra, Phase-5, Cellulosics Rd, Phase 3, Industrial Area, Sector 58, mohali, punjab 160071</p>
        </div>
        <div class="col-md-2">
            <div class="non-lunch-logo-img text-right">
                <img src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/logo_new-1.png">
            </div>
        </div>
    </div>
    <div class="row padding-15px non-lunch-p-h">
        <div class="col-md-2 col-sm-2 col-xs-4 text-center"><img width="50" alt="" src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/office_icon.png"></div>
        <div class="col-md-8 col-sm-8 col-xs-10 new-appo-margin">
            <h2><a href="http://orphcnul.com/lunch-pro-dev/rep/policy/index/7" class="trigger_class">Beli  hospital with emergency</a></h2>
            <p class="font_p_14 font_24px-color">test test, test 89541</p>
        </div>
        <div class="col-md-2">
            <div class="non-lunch-logo-img text-right">
                <img src="http://orphcnul.com/lunch-pro-dev/assests/UI/dashboard/images/logo_new-1.png">
            </div>
        </div>
    </div>
</div>

我使用的字符串如下：

$(document).ready(function(){
    $('.non-lunch-p-h').click(function(){
        $("a.trigger_class").trigger('click');
    });     
});

但它给了我一个错误：

错误:堆栈溢出，递归过多

Answer 1

问题在于.trigger_class元素包含在.non-lunch-p-h元素中。这意味着触发DOM的click事件从.trigger_class返回到.non-lunch-p-h并触发另一次单击，触发DOM，引发另一次单击.依此类推，从而导致Stack溢出异常。

要解决这个问题，您应该在stopPropagation单击事件处理程序中使用.tigger_class：

$('a.trigger_class').click(function(e) {
    e.stopPropagation();

    // your code here...
});

或者(或者更好地说，我认为)是在这两种情况下调用一个函数，而不是创建用户没有显式创建的事件：

$('.non-lunch-p-h').click(doSomething);

$('a.trigger_class').click(function(e) {
    e.stopPropagation();
    doSomething();
});

function doSomething() {
    console.log('foo');
}

Answer 2

如果你想打开模态，那么..。

$(document).ready(function(){
    $('.non-lunch-p-h').click(function(){
        $("#bring_food6").modal('show');
    });     
});

Answer 3

有多个元素与选择器匹配。

$("a.trigger_class")

您只想触发包含在用户单击的元素中的a.trigger_class。

所以你想要这样的东西

$(document).ready(function(){
    $('.non-lunch-p-h').click(function(){
        $(this.currentTarget).find("a.trigger_class").trigger('click');
    }); 
});

，但以这种方式，您将触发一个包含在.-p-h中的元素中的单击事件。这会导致递归。因此，您希望以这样的方式更改代码：

$(document).ready(function(){
    $('.non-lunch-p-h').click(function(){
        var hrefVal = $(this.currentTarget).find("a.trigger_class").attr('href');
        document.location = hrefVal;
    }); 
});