Javascript is not working after clicking outside of modal window on bootstrap
After clicking outside the modal window, then open again the same modal window. All the functionality I had inside just stopped working.
I don't want to prevent the user from clicking outside the modal, any idea on what i can do to avoid this problem?
I have the following line of code for calling the modal window:
<a href="/samples/edit/{{$sample->project_id}}/{{$sample->id}}" data-target="#editSample" data-toggle="modal"> {{$sample->name}}</a>
And here I have some javascript code that is executed inside the modal.
$(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');
}
});
now when the user clicks outside the modal window to close it, and if the user decides to open the window again. all the Javascript stops working. I have to refresh the page in order to open again the modal and be able to work with all the functionality inside the modal
At a guess (given the amount of code you've given) I wonder if the click events are becoming detached.
Instead of $(element).click(function(){});
... use jQuery's .on() method like this:
$(element).on('click',function(){});
So what I did, was that I added a refresh on the page every time the modal window was being closed by clicking outside of it. Still wondering if there is a better solution. But so far this is working.
window.location.reload()