欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

當(dāng)我試圖刪除模式對話框中的div元素時(shí)，對話框關(guān)閉

CSS
錢多多2年前6瀏覽0評論

我有一個(gè)代碼，在這個(gè)代碼中，我在一個(gè)模態(tài)對話框中用動(dòng)態(tài)結(jié)構(gòu)添加和刪除div。奇怪的是，當(dāng)我試圖用remove()方法刪除一個(gè)div元素時(shí)，模式對話框也關(guān)閉了。但是我沒有任何代碼來觸發(fā)它的關(guān)閉。我找不到問題的根源。

這個(gè)div是在用jquery打開模式對話框之前；(HTML頁面上的原始狀態(tài))；

<div class="modal fade" id="locigModalStep1"  role="dialog" data-backdrop="static">

用& quot打開模型對話框后。模態(tài)(' show ')；"

<div class="modal fade show" id="locigModalStep1" role="dialog" data-backdrop="static" aria-modal="true" style="display: block;">

在模式對話框中用。remove()方法；

<div class="modal fade" id="locigModalStep1"  role="dialog" data-backdrop="static">

從下面的鏈接可以看到刪除div元素前后的html代碼對比；點(diǎn)擊這里

當(dāng)我在stackoverflow上運(yùn)行代碼時(shí)，一切似乎都很好?！皠h除”按鈕正常工作，對話框不會關(guān)閉。在我自己的原始項(xiàng)目中，一定有什么東西破壞了這個(gè)版本。

function deleteLogicTableButtonFunc(event) {

  const tableId = this.id.replace('deleteTable', '');

  const table = document.getElementById(`tableComponentHeader${tableId}`);
  const operatorContainer = document.getElementById(`logicOperatorContainer${tableId}`);

  table.remove();
  operatorContainer.remove();

}

function addChildToLogicTable(componentId){

            const tableChild = document.getElementById("tableContainer");
            if (tableChild != null) {

              $(tableChild).append(getLinesForAddLogicTable(addLogicComponentTableText, componentId));
                $(tableChild).append(addLogicOperatorButton(componentId));

              const deleteTableButton = document.getElementById("deleteTable"+componentId.toString());
              deleteTableButton.addEventListener("click", deleteLogicTableButtonFunc);

                      
            }

}

function replaceAll(str, find, replace) {
  return str.replace(new RegExp(find, 'g'), replace);
}

function getLinesForAddLogicTable(func, compId) {

  var myhtml = func.toString();
  var htmlstart = myhtml.indexOf('/*');
  var htmlend = myhtml.lastIndexOf('*/');

  myhtml = myhtml.substr(htmlstart + 2, htmlend - htmlstart - 2);

  myhtml = replaceAll(myhtml, "{selectedComponent}", compId)

  return myhtml;
}


function addLogicComponentTableText() {/*

 <table class="table table-bordered" style="margin-top: 20px;" id="tableComponentHeader{selectedComponent}">
    <thead>
        <tr>
            <th colspan="4" style="text-align:center;"><button type="button" class="btn btn-danger" id="deleteTable{selectedComponent}">Delete</button></th>
        </tr>
        <tr>
            <th id="columnCompName{selectedComponent}">Component Name</th>
            <th>Grup Adresses</th>
            <th>Operator</th>
            <th>Input Value</th>
        </tr>
    </thead>
     <tbody>
         <tr>
             <td>1. Group Adress: </td>
             <td id="cellGa{selectedComponent}"> --- </td>
             <td>
                 <select class="form-control" id="cellOperatorSelect{selectedComponent}">
                     <option value="equal" selected>==</option>
                     <option value="exclamation">!!</option>
                     <option value="bigger">></option>
                     <option value="smaller"><</option>
                     <option value="biggerAndEqual">>=</option>
                     <option value="smallerAndEqual"><=</option>
                 </select>
             </td>
             <td id="cellInputValue{selectedComponent}">Input</td>
         </tr>
         <tr>
             <td>2. Group Adress: </td>
             <td id="cellSecondGa{selectedComponent}"> --- </td>
             <td>
                 <select class="form-control" id="cellOperatorSelectSecond{selectedComponent}">
                     <option value="equal" selected>==</option>
                     <option value="exclamation">!!</option>
                     <option value="bigger">></option>
                     <option value="smaller"><</option>
                     <option value="biggerAndEqual">>=</option>
                     <option value="smallerAndEqual"><=</option>
                 </select>
             </td>
             <td id="cellInputValueSecond{selectedComponent}">Input</td>
         </tr>
         <tr>
             <td>Feedback Group Adress: </td>
             <td id="cellFa{selectedComponent}"> --- </td>
             <td>
                 <select class="form-control" id="cellOperatorSelectFeedback{selectedComponent}">
                     <option value="equal" selected>==</option>
                     <option value="exclamation">!!</option>
                     <option value="bigger">></option>
                     <option value="smaller"><</option>
                     <option value="biggerAndEqual">>=</option>
                     <option value="smallerAndEqual"><=</option>
                 </select>
             </td>
             <td id="cellInputValueFeedback{selectedComponent}">Input</td>
         </tr>
     </tbody>
 </table>


*/}

function addLogicOperatorButton(componentId) {
    return `
    <div class="logic-operator-container" id="logicOperatorContainer${componentId}">
        <button class="btn logic-operator logic-operator-selected  btn-success" data-operator="AND">AND</button>
        <button class="btn logic-operator" data-operator="OR">OR</button>
    </div>
    `;
}

$("#addInputComponent").click(function () {

addChildToLogicTable("1");
document.getElementById("addInputComponent").style.visibility = 'hidden';
});

$("#addKnxComponent").click(function () {

addChildToLogicTable("2");
document.getElementById("addKnxComponent").style.visibility = 'hidden';

});

$("#addOutputComponent").click(function () {

addChildToLogicTable("3");
document.getElementById("addOutputComponent").style.visibility = 'hidden';

});

<!DOCTYPE html>
<html>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" >
</head>
<body>

    <button type="button" class="btn btn-secondary" id="openModalDialog">Open Modal Dialog</button>

<!-- Logic Func Modal Step 1 -->
<div class="modal fade" id="locigModalStep1"  role="dialog" data-backdrop="static">
    <!-- Modal ??erik -->
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Component Choose</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
  
          <div style="display: flex; justify-content: space-around;">
            <figure>
              <figcaption style="text-align: center;">Add KNX Component</figcaption>
              <div style="text-align: center;">
                <img id="addKnxComponent"
                     src="https://img.icons8.com/?size=512&id=24717&format=png"
                     style="max-width: 45px; max-height: 45px; cursor: pointer;" />
              </div>
            </figure>
  
            <figure>
              <figcaption style="text-align: center;">Add INPUT Component</figcaption>
              <div style="text-align: center;">
                <img id="addInputComponent"
                     src="https://img.icons8.com/?size=512&id=24717&format=png"
                     style="max-width: 45px; max-height: 45px; cursor: pointer;" />
              </div>
            </figure>
  
            <figure>
              <figcaption style="text-align: center;">Add OUTPUT Component</figcaption>
              <div style="text-align: center;">
                <img id="addOutputComponent"
                     src="https://img.icons8.com/?size=512&id=24717&format=png"
                     style="max-width: 45px; max-height: 45px; cursor: pointer;" />
              </div>
            </figure>
          </div>
  
  
  
          <!-- Tablolar -->
          <div id="tableContainer"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" id="logicStep1Close">Kapat</button>
          <button type="button" class="btn btn-primary" id="logicStep1Next">?leri</button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <script>
    $("#openModalDialog").click(function () {
        $('#locigModalStep1').modal('show');
    });
  </script>
</body>
</html>

我的問題是由于引導(dǎo)版本；我在我的項(xiàng)目中使用的是5.2.1版本，當(dāng)我將這個(gè)版本降級到5.0.2時(shí)，我的問題就解決了。

我的項(xiàng)目中的版本；

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js"
        integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>

解決我問題的版本；

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
</script>