如何将data- *属性传递给连续打开的引导程序模式

问题描述

我正在使用Bootstrap模式。第一个模式是“配置文件信息”，第二个模式是用于编写由第一个模式中的定位标记触发的消息。

我正在尝试将data- *属性从第一个模式传递到第二个模式。

打开第一个模态时，我可以使用EL轻松地将JSP的值传递给它。

但是当我尝试再次将其传递给第二个模式以编写消息时，我的代码不起作用。

我使用.attr（）来设置'data- *'属性，看来它可以工作。 （该值通过'console.log'打印得很好。）但是，第二个模式无法获取该值。

如何将相同的值传递给第二个模式？

脚本

    $(function(){
            $(".open-profileInfoModal").on("click",function(){
                var username = $(this).data('name');
                $("#profile-modal-title").text(username);
                $("#sendMessage").attr("data-username",username);

                console.log($("#sendMessage").attr("data-username"))   //It works!
                
                $('#sendMessage').on('show.bs.modal',function (event) {
                  var aTag = $(event.relatedTarget)
                  var recipient = aTag.data('username')

                  console.log(recipient)     //It does not work! It returns 'undefined'

                  var modal = $(this)
                  modal.find('.modal-title').text('send message to ' + recipient)
                  modal.find('#recipient-name').val(recipient)
                })
            })
            
        })

HTML

<a href="#profileInfo" class="open-profileInfoModal" data-toggle="modal" data-name="${board.name}">${board.name}</a>

//This is first-level Modal
            <div class="modal fade" id="profileInfo" data-keyboard="true" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered modal-sm">
                <div class="modal-content">
                  <div class="modal-header">
                    <h3 class="modal-title" id="profile-modal-title"></h3>
                  </div>
                  <div class="modal-body" id="findid-modalbody">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-4">
                                <a href="#">
                                    <span style="color:#5A3FEE"><i class="fa fa-user fa-2x" aria-hidden="true"></i></span><br><span class="modal-font">UserInfo</span>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="#sendMessage" data-toggle="modal">
                                    <span style="color:green"><i class="fa fa-envelope fa-2x" aria-hidden="true"></i></span><br><span class="modal-font">Message</span>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="#">
                                    <span style="color:red"><i class="fa fa-exclamation-circle fa-2x" aria-hidden="true"></i></span><br><span class="modal-font">Report</span>
                                </a>
                            </div>
                        </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>


//This is second-level modal            
            <div class="modal fade" id="sendMessage" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">
                <div class="modal-content">
                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">New Message</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <form>
                      <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Recipient:</label>
                        <input type="text" class="form-control" id="recipient-name" readonly>
                      </div>
                      <div class="form-group">
                        <label for="message-title" class="col-form-label">Title:</label>
                        <input type="text" class="form-control" id="message-title">
                      </div>
                      <div class="form-group">
                        <label for="message-text" class="col-form-label">Content:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                      </div>
                    </form>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Send</button>
                  </div>
                </div>
              </div>
            </div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）