Question

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

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

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

<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都停止工作了。我必须刷新页面才能再次打开模态并能够使用模态中的所有功能

Answer 1

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

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

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

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

Answer 2

所以我做的是，每次关闭模态窗口时，我都会在页面上添加一个刷新点击。仍然想知道是否有更好的解决方案。但到目前为止，这是有效的。

window.location.reload()

在bootstrap上单击模态窗口外部后，Javascript无法正常工作

2 个答案: