Develop Reference

I want to hide menu when anyone click outside of div need help css, js

I want to hide menu when anyone click outside of div need help
Here is my js code
const slinky = $('#menu').slinky()
function sidebarMainmenu() {
var menuTrigger = $('.clickable-mainmenu-active'),
endTrigger = $('button.clickable-mainmenu-close'),
container = $('.clickable-mainmenu');
menuTrigger.on('click', function(e) {
e.preventDefault();
container.addClass('inside');
});
endTrigger.on('click', function() {
container.removeClass('inside');
});
};
sidebarMainmenu();

Fill input field in Elementor pop-up

I am trying to create a function which would fill input in popup window automatically depending on brn id that was clicked.
This is where I am at:
const btn = document.querySelector('.popup-activator')
let btnId
btn.addEventListener('click', function(){
btnId = this.id;
});
document.getElementById("form-field-id").value = btnId;
I can see that my id is saved in btnId, but it's not showing up in form field. It might be because when I click the button popup is not generated on the page yet, it opens after I click the button.
Here is the link I am trying to do this https://www.avistech.cz/pujcovna-nakladace/ it's applied on first button 'Poptat'
If can anyone help I would really appriciate it

You need to assign the value to the input, when the modal is fully loaded.
const btns = document.querySelectorAll('.popup-activator')
btns.forEach(b => {
b.addEventListener('click', function(){
const btnId = this.id;
// setting the value inside the fn so that it triggers after the button clicks
// setTimeout delays the assignment a little so that the modal gets mounted
setTimeout(() => {
document.getElementById("form-field-id").value = btnId;
})
});
})

Dynamically created buttons won't fire when clicked

I'm creating buttons based on what a user enters into an input box. However, the function i have linked to the dynamically created buttons won't fire when pressed.
function btnCreate() {
num++;
userBtn = $("<button>")
userBtn
.addClass("btn search-term-btn dynamicElement")
.appendTo($(".btn-holder"))
.text(topics)
.attr("data-name", topics);
usedTopics.push(topics + num);
topics = [];
console.log(num);
};
$(".search-term-btn").on("click", ".dynamicElement", function () {
// takes the name of the button
searchValue = $(".search-term").attr("data-name");
console.log(searchValue);
})
The class is correct, ive checked with the inspector. I just can't seem to figure out why it's unresponsive

Create the click event on DOM.
$(document).on("click", ".search-term-btn .dynamicElement", function () {
console.log(this)
});

while you are creating the buttons, you can add the onclick function there..
like userBtn = $("<button onlcikc="somefunction(this)">")
OR
you can use on function which is
$('body').on( "click",".dynamicElement", function() {
//your code
});

Make jquery working on dynamic content

i have this bootstrap carousel script, but the trigger is an appended button. I'm junior in js and i'm not that sure how should i us on or delegate to make it working and change the code. Could you help me with this? also maybe tell me how should i use it. Thnx in advance
<script>
/* activate the carousel */
$("#modal-carousel").carousel({interval:false});
/* change modal title when slide changes */
$("#modal-carousel").on("slid.bs.carousel", function () {
$(".modal-title").html($(this).find(".active img").attr("title"));
})
/* when clicking a thumbnail */
$(".galz .gal").click(function(){
var content = $(".carousel-inner");
var title = $(".modal-title");
content.empty();
title.empty();
var id = this.id;
var repo = $("#img-repo .item");
var repoCopy = repo.filter("#" + id).clone();
var active = repoCopy.first();
active.addClass("active");
title.html(active.find("img").attr("title"));
content.append(repoCopy);
// show the modal
$("#modal-gallery").modal("show");
});
</script>

Use event delegation
$(document).on('click', 'element', function() {
// Your function code
});

You can call click in this way also
$(document).delegate('.galz', 'click', function() {
//your code
});

When button is clicked how to get the text from the textbox immediately above it

I have some code like:
<input type="text" class="searchpersontxtbox" />
<input type="button" value="Find" class="findpersonbtn btn" disabled="disabled" />
There is a button click event:
$(document).ready(function () {
$('.findpersonbtn').click(function () {
var findpersonbutton = $(this);
var searchbox = $(this).closest('.searchpersontxtbox');
alert(show the searchbox text here);
});
});
So when the button is clicked I'm trying to get the text in the searchbox and alert it to the screen.
One point to note is that there could be multiple searchboxes on the page with 'searchpersontxtbox' class.
So I'm wanting to get the text from the textbox that is right above the button.
Can anyone help me here?

I think hes looking for something relative... like this..
$(document).ready(function(){
$('.findpersonbtn ').click(function () {
var findpersonbutton = $(this);
//do relative search here...
var searchbox = findpersonbutton.parent().find('.searchpersontxtbox');
alert(searchbox.val());
});
});

This isn't how closest works. Without seeing the rest of your markup, one way to do this would be:
$(document).ready(function () {
$('.findpersonbtn').click(function () {
var findpersonbutton = $(this)
, searchbox = $(this).prev();
alert(searchbox.val());
});
});
You can use prev to get the element right above the clicked .findpersonbtn.

$(function(){
$('button').click(function() {
var text = $('textarea').val();
alert(button);
}
});
something like that? search for getting textarea value with jQuery, then apply that method in a variable and alert out it's text. should work?

You may want to check out .previousSibling(), which should return the previous input.
http://jsfiddle.net/TbYup/