JavaScript-从另一个文件监听模式关闭事件-堆栈溢出

顺晟科技

2022-10-19 13:27:06

186

是否可以从其他文件监听jquery模式关闭事件？

我在另一个PHP文件中创建了模式，当我在模式PHP文件中使用事件侦听器时，它可以工作，但当我像下面这样使用它时，它就不工作了。

模式隐藏函数在createUserModal.php中调用。我希望在成功创建用户时，模式关闭并在user.php页面中触发一个JS函数，该函数获取系统中的所有用户。

这是我的user.php文件

<body>
    <div>
        <div>
            <button class="btn btn-primary btn-md" id="add-user">
                <i class="fa fa-plus " aria-hidden="true"></i>
            </button>
            <div class="modal-container"></div>
        </div>
        <div id="userTable" style="color:black"></div>
        <script>
         $('#add-user').click(function(e) {
            var url = "https://centralamericanmanagement.000webhostapp.com/pages/components/Modals/CreateUser.php";
            $('.modal-container').load(url,function(result){
                $('#CreateUserModal').modal({show:true});
             });
         });
            $('#CreateUserModal').on('hidden.bs.modal', function() {
                console.log('Modal Has been closed');
            });
        </script>
    </div>
</body>

从这里，当单击add-user按钮时，模态将在模态容器div中打开。其代码为:

createusermodal.php

<body>
    <div>
        <div>
            <button class="btn btn-primary btn-md" id="add-user">
                <i class="fa fa-plus " aria-hidden="true"></i>
            </button>
            <div class="modal-container"></div>
        </div>
        <div id="userTable" style="color:black"></div>
        <script>
         $('#add-user').click(function(e) {
            var url = "https://centralamericanmanagement.000webhostapp.com/pages/components/Modals/CreateUser.php";
            $('.modal-container').load(url,function(result){
                $('#CreateUserModal').modal({show:true});
             });
         });
            $('#CreateUserModal').on('hidden.bs.modal', function() {
                console.log('Modal Has been closed');
            });
        </script>
    </div>
</body>

顺晟科技：

可以在每个HTML元素上使用事件侦听器。例如，您的模态容器。所以您可以更改这一行:

<body>
    <div>
        <div>
            <button class="btn btn-primary btn-md" id="add-user">
                <i class="fa fa-plus " aria-hidden="true"></i>
            </button>
            <div class="modal-container"></div>
        </div>
        <div id="userTable" style="color:black"></div>
        <script>
         $('#add-user').click(function(e) {
            var url = "https://centralamericanmanagement.000webhostapp.com/pages/components/Modals/CreateUser.php";
            $('.modal-container').load(url,function(result){
                $('#CreateUserModal').modal({show:true});
             });
         });
            $('#CreateUserModal').on('hidden.bs.modal', function() {
                console.log('Modal Has been closed');
            });
        </script>
    </div>
</body>

并给它一个ID

<body>
    <div>
        <div>
            <button class="btn btn-primary btn-md" id="add-user">
                <i class="fa fa-plus " aria-hidden="true"></i>
            </button>
            <div class="modal-container"></div>
        </div>
        <div id="userTable" style="color:black"></div>
        <script>
         $('#add-user').click(function(e) {
            var url = "https://centralamericanmanagement.000webhostapp.com/pages/components/Modals/CreateUser.php";
            $('.modal-container').load(url,function(result){
                $('#CreateUserModal').modal({show:true});
             });
         });
            $('#CreateUserModal').on('hidden.bs.modal', function() {
                console.log('Modal Has been closed');
            });
        </script>
    </div>
</body>

然后将侦听器更改为

<body>
    <div>
        <div>
            <button class="btn btn-primary btn-md" id="add-user">
                <i class="fa fa-plus " aria-hidden="true"></i>
            </button>
            <div class="modal-container"></div>
        </div>
        <div id="userTable" style="color:black"></div>
        <script>
         $('#add-user').click(function(e) {
            var url = "https://centralamericanmanagement.000webhostapp.com/pages/components/Modals/CreateUser.php";
            $('.modal-container').load(url,function(result){
                $('#CreateUserModal').modal({show:true});
             });
         });
            $('#CreateUserModal').on('hidden.bs.modal', function() {
                console.log('Modal Has been closed');
            });
        </script>
    </div>
</body>

还将'$(document).ready(function(){}‘环绕在事件侦听器初始化的周围。

问题是，在事件侦听器ist创建时，模式可能不是页面的一部分。所以jquery找不到它，也不能初始化事件侦听器。

上一篇：朝鲜深夜炮击朝韩缓冲水域 C#-在D 下一篇：JavaScript-Money d

网站建设

Html

JavaScript-从另一个文件监听模式关闭事件-堆栈溢出