Javascript 在引导程序的模态窗口之外单击后不起作用

Javascript is not working after clicking outside of modal window on bootstrap

本文关键字：单击 不起作用 窗口 引导程序 模态 Javascript      更新时间：2023-09-26

在模态窗口外单击后，再次打开相同的模态窗口。我里面的所有功能都停止了工作。

我不想阻止用户在模态之外单击，关于我可以做些什么来避免这个问题的任何想法？

我有以下代码行用于调用模态窗口：

<a href="/samples/edit/{{$sample->project_id}}/{{$sample->id}}" data-target="#editSample" data-toggle="modal"> {{$sample->name}}</a>

在这里，我有一些在模态中执行的javascript代码。

$(document).ready(function()
{
$("input[name$='data_input']").click(function(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('test');
    var type = $(this).val();
    $("#data_input_type").val(type);
    $("div.data_input").hide();
    $("#data" + type).show();
    var btn = event.target.id;
    if (btn === 'toggle-xyz')
    {
        $('#sample-btn-xyz').addClass('active');
        $('#sample-btn-drillhole').removeClass('active');
    }
    else
    {
        $('#sample-btn-drillhole').addClass('active');
        $('#sample-btn-xyz').removeClass('active');
    }
});

现在，当用户在模式窗口外单击以关闭它时，如果用户决定再次打开窗口。 所有的Javascript都停止工作。我必须刷新页面才能再次打开模态并能够使用模态内的所有功能

猜测（考虑到您给出的代码量），我想知道点击事件是否变得分离。

而不是$(element).click(function(){});

。使用 jQuery 的 .on() 方法，如下所示：

$(element).on('click',function(){});

所以我所做的是，每次关闭模态窗口时，我都会通过单击外部来在页面上添加刷新。仍然想知道是否有更好的解决方案。但到目前为止，这正在发挥作用。

window.location.reload()
相关文章：