Javascript在使用细枝模板打开模式时未触发

注意：我已经尝试了网上为我的问题找到的各种解决方案，但没有一个有效

我试图从一个表中传递内容，其中每一行都有自己的按钮来编辑该行中的内容。该按钮打开一个Twitter引导下拉列表，其中有两个按钮，一个是“编辑”按钮。“编辑”按钮打开具有文本区域输入的模式。我希望文本区域在表中显示当前文本以进行编辑。我使用PHP和Symfony来处理表单，使用Twig来处理页面渲染

触发模式的按钮

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
   <button class="btn btn-sm dropdown-item edit-button" data-toggle="modal" data-target="#announcementEditModal" data-id="{{ announcement.id }}" data-content="{{ announcement.content }}" type="button">
       <div class="announcement-actions">
          <span class="fas fa-pencil-alt"></span> Edit announcement
       </div>
  </button>

编辑公告

模态

<div class="modal fade" id="announcementEditModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header announcement-header">
                <h5 class="modal-title" id="exampleModalLabel"><span class="fas fa-edit"></span> Edit new announcement</h5>
            </div>
            <div class="announcement-card-header card m-3 border-0">
                <div class="announcement-card-header card-body border-0 p-1">
                    <span class="fa fa-info-circle fa-lg header-icon"></span>
                    <h5 class="align-header">ANNOUNCEMENT TEXT</h5>
                </div>
                <div class="announcement-card-body modal-body card border-0">
                    {{ form_start(editForm) }}
                    <div class="announcement-card-body">
                        <label for="exampleInputEmail1">ANNOUNCEMENT (SUPPORTS MARKDOWN)</label>
                        <textarea class="form-control" id="announcementText" rows="5" name="content"></textarea>
                    </div>
                </div>
            </div>
            <div class="card-footer border-0 bg-white pt-0">
                <div>
                    {{ form_widget(editForm.edit, {'left_icon': 'fas fa-check'}) }}
                    <button type="button" class="btn btn-light" data-dismiss="modal" aria-label="Close">
                        Cancel
                    </button>
                </div>
            </div>
            {{ form_end(editForm) }}
        </div>
    </div>
</div>

编辑新公告
公告文本
{{form_start（editForm）}
公告（支持降价）
{{form_小部件（editForm.edit，{'left_icon'：'fas fa check'}}}}
取消
{{form_end（editForm）}

JavaScript

<script type="text/javascript">
    $(".edit-button").click(function(){
        var content = $(this).data("content");
        alert(content);
    });

    $('#announcementEditModal').on('shown.bs.modal', function () {
        alert("modal open");
        document.getElementById("#announcementText").val(content);
    })
</script>

$（“.edit按钮”）。单击（函数（）{
var content=$（this.data（“content”）；
警报（内容）；
});
$（'#announcementeditmodel'）.on（'show.bs.modal'，function（）{
警报（“模态打开”）；
document.getElementById（“#announcementText”）.val（内容）；
})

警报（“模式打开”）未触发。我已尝试了

'show.bs.modal'

和

'show.bs.modal'`。我使用的是Bootstrap4.12

---

编辑：解决方案：一旦我将JS移到一个announcements.JS文件中，在那里我正在用我的表单做一些事情，触发器就会工作

您可能有不完整的html代码，或者没有与我们共享所有代码

• 下拉菜单没有结束div
• 在下拉列表或btn组中包装下拉菜单
• var内容在show.bs.modal函数中不可用，所以全局声明它，这不是一个很好的建议，但为了简单起见

修复Javascript错误，因为您使用的是jQuery，所以请使用它

    document.getElementById("#announcementText").val(content); // val is not function

取代

document.getElementById("#announcementText").value = content;  
$("#announcementText").val(content); // or jQuery way

这是小提琴：

尝试2

下面是一个显示模块模式的示例，展示了如何避免全局变量，以及如何更干净。您可以阅读有关此模式的更多信息

//显示模块模式
var MyProject=MyProject | |{}；//您的全局对象
MyProject.Modal=function（）{//model的命名空间
var content=”“；//现在内容是此函数的本地内容；
var onEditClick=function（）{
$（“.edit按钮”）。单击（函数（）{
内容=$（此）.data（“内容”）；
警报（内容）；
});
};
var onModalShow=函数（）{
$（'#announcementeditmodel'）.on（'show.bs.modal'，function（）{
警报（“模态打开”）；
//$（“#公告文本”）.val（内容）；可能重复的代码应该是完整的。我只是省略了很多以节省空间。感谢您的回复，很抱歉延迟。因此，让它在单击按钮时打开是可行的，但是我如何在不使用全局变量的情况下将其传递到模式中？此外，我将您的代码复制粘贴在我的小树枝文档的底部，并且当moda时不会触发警报l（您创建的）打开。我更改了您创建的模式的id。您可以将整个代码包装在一个闭包中以避免全局的。您的代码是否包装在$（document）.ready（function（）{}）中不是的，我要补充一点。模式打开触发器的警报仍然没有触发。但是你有没有收到任何控制台错误？你的代码实际上是有效的，我怀疑还有其他错误
 // Revealing Module Pattern
  var MyProject = MyProject || {}; // Your global object
  MyProject.Modal = function() { // Namespacing to Modal

    var content = ""; // now content is local to this function;

    var onEditClick = function() {
      $(".edit-button").click(function() {
        content = $(this).data("content");
        alert(content);
      });
    };

    var onModalShow = function() {
      $('#announcementEditModal').on('shown.bs.modal', function() {
        alert("modal open");
        // $("#announcementText").val(content); <-- jQuery way
        document.getElementById("announcementText").value = content;
      });
    };

    var init = function() {
      onEditClick();
      onModalShow();
    };

    return {
      init: init // expose this for other functions to call
    }

  }();

  $(document).ready(function() {
     MyProject.Modal.init();

 });