我的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');
});
});
但它给了我一个错误：
错误：堆栈溢出，递归过多
答案 0 :(得分：3)
问题是因为.trigger_class元素包含在.non-lunch-p-h元素中。这意味着您触发的click事件会将DOM从.trigger_class冒泡回.non-lunch-p-h并触发另一次点击，这会点亮DOM，从而触发另一次点击...等等on，因此Stack Overflow异常。
要解决此问题，您应该在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');
}
答案 1 :(得分：1)
如果你想打开模态那就做..
$(document).ready(function(){
$('.non-lunch-p-h').click(function(){
$("#bring_food6").modal('show');
});
});
答案 2 :(得分：0)
有多个元素与选择器匹配
$("a.trigger_class")
您只想触发用户点击的元素中包含的 a.trigger_class 。
所以你想要这样的东西：
$(document).ready(function(){
$('.non-lunch-p-h').click(function(){
$(this.currentTarget).find("a.trigger_class").trigger('click');
});
});
但是这样您就会触发 .non-lunch-p-h 中包含的元素中的click事件。这会导致递归。所以你想用这种方式改变你的代码：
$(document).ready(function(){
$('.non-lunch-p-h').click(function(){
var hrefVal = $(this.currentTarget).find("a.trigger_class").attr('href');
document.location = hrefVal;
});
});