我从具有多个模态按钮的视图中的几个模态中得到奇怪的行为。当我在视图的一个部分中单击一个模态时，它会向我显示一个在视图的不同部分呈现的模态（应该弹出一个不同的按钮）。我看到错误的模态是用Ajax加载的。当我看到模态背后的HTML时，它就是我所期望的那样，然后当我点击模态本身时，内容并不反映它背后的HTML？这之前工作正常，我无法弄清楚改变了什么。但是在使用Ajax引入模态元素后，似乎没有将事件绑定到正确的按钮。
当我点击按钮时，这是模式按钮背后的HTML无法正确呈现。
<button id="859" class="editicon" data-target="#w0" style="background:#ffffff; border:0" data-get="1" data-toggle="modal" title="Pulse New Notification" type="button">
<i class="fa fa-heartbeat fa-2x text-danger"></i>
</button>
<div id="w0" class="fade modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" aria-hidden="true" data-dismiss="modal" type="button">×</button>
<h3>Edit or Pulse Blog Updates</h3>
</div>
<div class="modal-body">
<div id="editevent134" class="modal-body" name="edit-modal">
<div class="form-group row">
<div class="row">
<div class="col-sm-12">
<input id="templateid134" class="templateheaders form-control eventname149-104134" type="text" placeholder="Enter Event Name.." ,="" data-req="0" style="width:100%;" name="eventname">
<div id="headerhelpmsg134"></div>
</div>
</div>
<br>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<label class="control-label">
Blog Link
<span style="color:#990000;">*</span>
</label>
<input id="pubselectid707-104-134" class="form-control 149-104-134" type="text" data-type="15" data-md="0" data-dd="0" style="height:33px; width:350px;" data-req="0" name="pubselect707">
<div id="helpmsg707-104-134"></div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4">
<label class="control-label">Tags </label>
<select id="pubselectid709-104-134" class="149-104-134 crystal149 form-control select2-hidden-accessible" data-krajee-select2="select2_c36fab6b" data-req="1" data-md="1" data-type="19" data-dd="1" data-child="0" style="width: 190px; display: none;" size="4" multiple="" name="pubselect709[]" tabindex="-1" aria-hidden="true">
<option value="709-12666">Oveido</option>
<option value="709-12667">Spain</option>
<option value="709-12668">Asturius</option>
</select>
<span class="select2 select2-container select2-container--krajee" dir="ltr" style="width: 100%;">
<span class="selection">
<span class="select2-selection select2-selection--multiple" aria-expanded="false" aria-haspopup="true" aria-autocomplete="list" role="combobox" tabindex="0">
</span>
<span class="dropdown-wrapper" aria-hidden="true"></span>
</span>
<div id="helpmsg709-104-134"></div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4">
<label class="control-label">Short Note </label>
<input id="pubselectid708-104-134" class="form-control 149-104-134" type="text" style="height:65px; width:600px;" data-type="4" data-md="0" data-dd="0" data-req="1" name="pubselect708">
<div id="helpmsg708-104-134"></div>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-4">
<label class="control-label">
Date Posted
<span style="color:#990000;">*</span>
</label>
<div id="pubselectid706-104-134-kvdate" class="input-group date">
<span class="input-group-addon kv-date-calendar" title="Select date">
<i class="glyphicon glyphicon-calendar"></i>
</span>
<span class="input-group-addon kv-date-remove" title="Clear field">
<i class="glyphicon glyphicon-remove"></i>
</span>
<input id="pubselectid706-104-134" class="form-control 149-104-134 krajee-datepicker" type="text" data-krajee-kvdatepicker="kvDatepicker_00000000" data-datepicker-type="2" data-datepicker-source="pubselectid706-104-134-kvdate" data-related="0" data-type="5" data-md="0" data-dd="0" data-req="0" readonly="" value="03/12/2016" name="pubselect706"></div>
<div id="helpmsg706-104-134"></div>
</div>
</div>
</div>
<br>
<br>
<div class="form-group row">
<div class="col-sm-3" style="padding:0px 0px 0px 45px">
<div id="pulsebtn149-104-134" class="existingevent" data-gdata="0">
<button class="btn" style="padding:10px 70px 10px 70px; color:#990000;border-radius:5px; background:#ffffff; border-width: 2px; border-color: #990000;" data-dismiss="modal" type="button">Pulse</button>
</div>
</div>
<div class="col-sm-3" style="padding:0px 0px 0px 10px">
<div id="savebtn149-104-134" class="editsavecontainer" data-gdata="0">
<button class="btn btn-danger" style="padding:10px 23px 10px 23px; color:#007ACC; border-radius:5px; background:#ffffff; border-width: 2px; border-color: #007ACC;" type="button">Update Template Only</button>
</div>
</div>
<div class="col-sm-3" style="float:right; padding:0px 0px 0px 0px;">
<div class="col-sm-1" style="margin:0px 45px 0px 0px">
<button class="btn btn-default" style="padding:10px 40px 10px 40px; color:#5f5f5f; border-radius:5px; background:#eeeeee; border-width: 2px; border-color: grey;" data-dismiss="modal" type="button">Cancel</button>
</div>
</div>
</div>< /div>
</div>
</div>
</div>
</div>
更新：
好吧，我想我想出来了。看起来像用AJAX渲染的模态在某些情况下被赋予相同的id作为页面加载时呈现的模态。因此，当“data-target = id”传递给事件时，我认为它正在选择DOM中的第一个事件。任何人都知道一种很好的方法可以为加载了AJAX的模态分配一个唯一的id，并使用bootstrap将按钮“data-target”属性指向该id？更新2：
public function getId($autoGenerate = true)
{
if ($autoGenerate && $this->_id === null) {
//add rand() to the counter to ensure unique id
$this->_id = static::$autoIdPrefix . static::$counter++ .rand();
}
return $this->_id;
}