单击 tr td 内的按钮时防止其他模式打开，其中单击 tr 将打开另一个模式

问题描述 投票：0回答：1

所以我有一个带有表格的网页。我已链接每个 tr 以打开显示详细信息的模式。

在最后一列中，我有一些按钮来执行特定任务，例如编辑。

我已经提到了这个问题并实现了一定的水平或功能。我的按钮确实打开了正确的模态，但是当我单击外部或单击模态的输入元素或关闭按钮时，链接到 tr 的模态将打开。

有人可以帮助我修复它，以便当我单击按钮时，仅链接到它的模态打开并正常运行，例如，它接受输入并正确关闭，而不是打开链接到 tr 的模态？

编辑按钮可打开正确的模式。但是，如果我单击模态上的任意位置，它会关闭并打开通过锚点按钮链接到 tr 的模态。

我想要的是 modalBtn 打开链接到它的模式，一切正常。如果我关闭该模式，则链接到 tr 的模式不应打开。基本上我想要在这种情况下有两个模式。当我单击 tr 上的任意位置时会打开一个模式，当我单击最后一列中 tr 内的编辑按钮时会打开一个模式。 请尽可能简化您的答案，谢谢。

澄清我原来的问题： 我能够将我的函数应用于所有 tr 标签。问题是我有最后一栏，其中有按钮。其中 2 个按钮链接到它们自己独特的模式。当我单击 tr 中的任意位置时，将打开正确的模式。另外，当我单击按钮时，正确的模式会打开。这里出现问题，当我单击屏幕上的任意位置时，即使是当前模态输入元素，当前模态也会关闭并打开链接到正常运行的 tr 标签的modal。我想要的是每个模态都能正常工作。

我修改了代码，因此您可以简单地运行 html 并检查问题，这不是原始表格，只是我的问题的一个小例子。

$(document).ready(() => { Array.from($('tr[id*="Deets"]')).forEach(element => { element.addEventListener('click', (e) => { if (e.target.parentElement.classList.contains('modalBtn')) { e.stopPropagation() } else { document.querySelector(`#anchor${element.id.split('Deets')[1]}`).click() } }) }); Array.from($('td .modalBtn')).forEach(ele => { console.log(ele); ele.addEventListener('click', (e) => { e.stopPropagation(); console.log(e.target.parentElement.nextElementSibling.getAttribute('id')); $(`#${e.target.parentElement.nextElementSibling.getAttribute('id')}`).modal('show'); }) }) })
<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>Hello, world!</title>
</head>

<body>
    <table class="table table-borderless">
        <thead>
            <tr>
                <th scope="col" class="w-30">Remarks</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr id="demoDeets1">
                <td scope="row"><label for="" title="remark">remark</label>
                </td>
                <td scope="row">
                    <a class="icon-3 modalBtn">
                        Edit
                    </a>
                    <div class="modal fade" id="edit1" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <b>
                                        heading1
                                    </b>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="text" class="big-input-w13h4 form-control" name="mail">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <a id="anchor1" data-bs-toggle="modal" data-bs-target="#demoDeets1"></a>
            <div class="modal fade" id="demoDeets1" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <b>
                                heading
                            </b>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <div class="col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <tr id="demoDeets2">
                <td scope="row"><label for="" title="remark">remark</label>
                </td>
                <td scope="row">
                    <a class="icon-3 modalBtn">
                        Edit
                    </a>
                    <div class="modal fade" id="edit2" tabindex="-1" aria-hidden="true">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <b>
                                        heading1
                                    </b>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="text" class="big-input-w13h4 form-control" name="mail">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <a id="anchor2" data-bs-toggle="modal" data-bs-target="#demoDeets2"></a>
            <div class="modal fade" id="demoDeets2" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <b>
                                heading
                            </b>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <div class="col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <tr id="demoDeets3">
                <td scope="row"><label for="" title="remark">remark</label>
                </td>
                <td scope="row">
                    <a class="icon-3 modalBtn">
                        Edit
                    </a>
                    <div class="modal fade" id="edit3" tabindex="-1" aria-hidden="true">

                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <b>
                                        heading1
                                    </b>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"
                                        aria-label="Close"></button>
                                </div>
                                <div class="modal-body">
                                    <input type="text" class="big-input-w13h4 form-control" name="mail">
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
            <a id="anchor1" data-bs-toggle="modal" data-bs-target="#demoDeets3"></a>
            <div class="modal fade" id="demoDeets3" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                    <div class="modal-content">
                        <div class="modal-header">
                            <b>
                                heading
                            </b>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">

                            <div class="col-lg-12">

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </tbody>
    </table>

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

</body>

</html>





    




javascript

html

jquery

bootstrap-modal


1个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        
您的代码太复杂，您的 HTML 无效。


这是一个更好的版本，因为您的按钮位于其自己的 td 中






$(() => {
  $('tr[data-target*="Deets"] td').on('click', function(e) {
    if ($(this).find('.modalBtn').length === 0) {
      const target = $(this).closest("tr").data("target");
      $(target).modal("show");
    }
  });
});
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>


  <title>Hello, world!</title>
</head>

<body>
  <table class="table table-borderless">
    <thead>
      <tr>
        <th scope="col" class="w-30">Remarks</th>
        <th scope="col"></th>
      </tr>
    </thead>
    <tbody>
      <tr data-target="#demoDeets1">
        <td scope="row"><label for="" title="remark">remark</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit1" class="icon-3 modalBtn">Edit</a>
          <div class="modal fade" id="edit1" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading1</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr data-target="#demoDeets2">
        <td scope="row"><label for="" title="remark">remark</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit2" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit2" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading2</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>

      <tr data-target="#demoDeets3">
        <td scope="row"><label for="" title="remark">remark</label>
        </td>
        <td scope="row">
          <a data-bs-toggle="modal" data-bs-target="#edit3" class="icon-3 modalBtn">Edit</a>

          <div class="modal fade" id="edit3" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
              <div class="modal-content">
                <div class="modal-header">
                  <b>heading3</b>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                  <input type="text" class="big-input-w13h4 form-control" name="mail">
                </div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>

  <div class="modal fade" id="demoDeets1" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 1</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets2" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading row modal 2</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="demoDeets3" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <b>heading rwo modal 3</b>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="col-lg-12">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>





    



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.