Question

今天我遇到了问题，我在td元素中有一个按钮元素。但是当我点击td元素时，必须可以添加一个带有模态的新分数，如果我单击按钮，我需要一个模态来编辑与该按钮链接的分数。

但是当我创建这个并且我点击按钮它会打开两个模态，看起来似乎是逻辑，但是如果我点击btn-modal我如何阻止打开td-modal

代码示例：

<td class="addScore" data-toggle="modal" data-target="#modalForm" data-number1="1" data-number2="123">
<center>
<btn class="label" data-toggle="modal" data-target="#modalUpdateForm"/>
</center>
</td>

我已经尝试过event.stopPropagation（）;和e.CancelBubble（）; 但两者都行不通。

编辑：

我的代码看起来像这样。我使用下载的jquery和bootstrap文件，所以一切正常，除了它打开两个模态而不是div中的一个。

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>

<table><tr class="competentie"><td>Kritische ingesteldheid</td><td class="addSleutel" data-toggle="modal" data-target="#modalForm"><div data-toggle="modal" data-target="#modalUpdateForm" id="1074"><span title="Jammer -  - 01/01/1970" class="feedback">Nog aan te werken</span><sup> (1)</sup></div><br></td><td class="addSleutel" data-toggle="modal" data-target="#modalForm" ></td><td class="addSleutel" data-toggle="modal" data-target="#modalForm" ></td><td data-toggle="modal" data-target="#modalForm"></td><td>(1) Jammer  ( 01/01/1970)<br></td></tr></table>


<div id="modalForm" class="modal fade" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">Nieuwe score</h4>
         </div>
         <div class="modal-body">
            <form id="frm_nieuwesleutel" class="form-horizontal mb-lg" novalidate="novalidate">
               <div class="form-group mt-lg">
                  <label class="col-sm-3 control-label">Score</label>
                  <div class="col-sm-9">
                     <div class="radio">
                        <label>
                        <input type="radio" name="optionScore" id="onvoldoende" value="9">
                        Onvoldoende
                        </label>
                     </div>
                     <div class="radio">
                        <label>
                        <input type="radio" name="optionScore" id="nog_aan_te_werken" value="10" >
                        Nog aan te werken
                        </label>
                     </div>
                     <div class="radio">
                        <label>
                        <input type="radio" name="optionScore" id="goed" value="11">
                        Goed
                        </label>
                     </div>
                     <div class="radio">
                        <label>
                        <input type="radio" name="optionScore" id="zeer_goed" value="12" checked="">
                        Zeer goed
                        </label>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <label class="col-sm-3 control-label">Feedback</label>
                  <div class="col-sm-9">
                     <textarea name="feedback" rows="5" class="form-control" placeholder="Geef hier feedback op" required></textarea>
                  </div>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
                  <button type="submit" class="btn btn-primary">Opslaan</button>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>

<div id="modalUpdateForm" class="modal fade" role="dialog">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="exampleModalLabel">Score wijzigen</h4>
         </div>
         <div class="modal-body">
            <form id="frm_nieuwesleutel" class="form-horizontal mb-lg" novalidate="novalidate">
               <div class="form-group mt-lg">
                  <label class="col-sm-3 control-label">Score</label>
                  <div class="col-sm-9">
                     <div class="radio">
                        <label>
                        <input type="radio" name="optionScore" id="onvoldoende" value="9">
                        Onvoldoende
                        </label>
                     </div>
                     <div class="radio">
                        <label>
                        <input type="radio" name="optionScore" id="nog_aan_te_werken" value="10" >
                        Nog aan te werken
                        </label>
                     </div>
                     <div class="radio">
                        <label>
                        <input type="radio" name="optionScore" id="goed" value="11">
                        Goed
                        </label>
                     </div>
                     <div class="radio">
                        <label>
                        <input type="radio" name="optionScore" id="zeer_goed" value="12" checked="">
                        Zeer goed
                        </label>
                     </div>
                  </div>
               </div>
               <div class="form-group">
                  <label class="col-sm-3 control-label">Feedback</label>
                  <div class="col-sm-9">
                     <textarea name="feedback" rows="5" class="form-control" placeholder="Geef hier feedback op" required></textarea>
                  </div>
               </div>
               <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
                  <button type="submit" class="btn btn-primary">Wijzigen</button>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>

btn在div中，都从bootstrap打开不同的jquery-modals

0 个答案: