Develop Reference

Attaching events to dynamic elements in wordpress - jquery

I'm trying to make a script that allows me to click on one div and that click triggers click on another. This another element is outside and nowhere near this first element. These elemnts i want to trigger click on are dynamically generated. Site runs on wordpress.
Here are elements im clicking on, just simple divs, eleven dives total:
<div id="jedna">
</div>
<div id="dva">
</div>
<div id="tri">
</div>
etc..
Here are elemts i want to trigger click event on, these are generated:
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="1" data-swiper-slide-index="1"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="2" data-swiper-slide-index="2"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="3" data-swiper-slide-index="3"></div>
<div class="swiper-slide" style="width: 356.6px;" data-slide-number="4" data-swiper-slide-index="4"></div>
I belive the only problem is that attaching events on these elements is not working even tho i attached it.
Here is full script, clicking function and attaching of events onto data-slide-number identifiers:
<script>
var $=jQuery.noConflict();
$(document).on('click', '#jedna', function(event) {
console.log($(this).html());
$('[data-slide-number="0"]').click();
});
$(document).on('click', '#dva', function(event) {
console.log($(this).html());
$('[data-slide-number="1"]').click();
});
$(document).on('click', '#tri', function(event) {
console.log($(this).html());
$('[data-slide-number="0"]').click();
});
$(document).on('click', '#styri', function(event) {
console.log($(this).html());
$('[data-slide-number="3"]').click();
});
$(document).on('click', '#pat', function(event) {
console.log($(this).html());
$('[data-slide-number="4"]').click();
});
$(document).on('click', '#sest', function(event) {
console.log($(this).html());
$('[data-slide-number="4"]').click();
});
$(document).on('click', '#sedem', function(event) {
console.log($(this).html());
$('[data-slide-number="6"]').click();
});
$(document).on('click', '#osem', function(event) {
console.log($(this).html());
$('[data-slide-number="7"]').click();
});
$(document).on('click', '#devat', function(event) {
console.log($(this).html());
$('[data-slide-number="8"]').click();
});
$(document).on('click', '#desat', function(event) {
console.log($(this).html());
$('[data-slide-number="9"]').click();
});
$(document).on('click', '#jedenast', function(event) {
console.log($(this).html());
$('[data-slide-number="10"]').click();
});
document.querySelectorAll('[data-slide-number]').forEach(item => {
item.addEventListener('click', event => {
console.log(item.getAttribute("data-slide-number"));
})
})
</script>
Any idea what am i missing ?
Here is website where you can check it out: http://www.sajdikyapartments.sk/
Its exactly in the middle, i want to click on building on image, that have hover efects on divs at top of them, and with that trigger clicking on tabs right above the image (01 Apartman, 02 Apartman etc..)

You're looking for .trigger( "click" ); (see JQuery documentation here https://api.jquery.com/trigger/).
So something like this maybe...
$(document).on('click', '#jedna', function() {
$('*[data-slide-number="0"]').trigger('click');
});

jQuery - document.on hover toggle method - error

So, I've been trying to create a function in jQuery where when you hover over an element, it toggles an img, and when you exit the element, the img gets toggled again. The only issue is that this all happens after a $(document).on slector. I've tried using $(document).off().on but it's not working. Here's my code:
$(document).on('mouseover', '.addressLink', function() {
var redirectSelector = $(this).children().last();
redirectSelector.toggle('fast');
$(this).mouseleave(
function() {
redirectSelector.toggle('fast');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>
Click For Location <img src='download.png' class='redirect display'>
</a>
</div>
This function works the first time, but then the img toggles and toggles again and again, doing it one more time for every mouseover! The event fires once, then twice, then three times, and so on. Thank you for your answers.

I made example for you.
$(document).on('mouseover mouseleave', '.addressLink', function(e) {
var $img = $(this).find('img');
if(e.type === 'mouseover') {
$img.stop(true, true).slideDown('fast');
}else {
$img.stop(true, true).slideUp('fast');
}
});
.addressLink img {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>Click For Location<img src='https://via.placeholder.com/150X30' class='redirect display'></a></p>
</div>

$(document).on('mouseenter mouseleave', '.addressLink', function() {
var redirectSelector = $(this).children().last();
redirectSelector.toggle('fast');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>
Click For Location <img src='download.png' class='redirect display'>
</a>
</div>
I would suggest using a single delegate for the mouseenter and leave, since all you are doing is toggling a class. This avoids the duplicate binding issue. There is still a little flakyness with the toggle due to the element moving and the mouse may accidentally leave the target while it is redrawing, but that's an issue with styling or such that can be addresses as a secondary issue.

Try this :
$('.addressLink').hover(function(){
var redirectSelector = $(this).children().last();
redirectSelector.show('fast');
}, function(){
var redirectSelector = $(this).children().last();
redirectSelector.hide('fast');
}
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='hoverDiv'>
<a class='addressLink' data-toggle='modal' data-target='#myModal'>
Click For Location <img src='download.png' class='redirect display'>
</a>
</div>

JQuery FadeIn and FadeOut with button issue

I am trying to create a button to show all content. I want a fadein on mouse enter, fadeout on mouseleave. when you click the button it disables the fade out, until clicked again and that re-enables it
Here is the Jsfiddle: https://jsfiddle.net/uv4bxdxs/16/
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>

One possible solution would be to add a class to displayed elements on the button click event. The class purpose is to disable the fade-in-out functionality. When the button is clicked again that class is removed to re-enable fade-in-out effect.
var flag = true;
$('button').click( function() {
if (flag) {
$('#div1h1').fadeIn().addClass('shown');
flag = false;
}
else {
$('#div1h1').fadeOut().removeClass('shown');
flag = true;
}
});
See DEMO

Please use this code:
$(function() {
var showAllFlag = false;
var btnShowAll = $('#show-all');
$('body').on('mouseenter', 'div.info-box', function() {
showTitle($(this))
}).on('mouseleave', 'div.info-box', function() {
hideTitle($(this))
});
function showTitle(target) {
target.find('h1').stop().fadeIn();
}
function hideTitle(target) {
if (!showAllFlag) {
target.find('h1').stop().fadeOut();
}
}
function showAllTitles() {
$('.info-box h1').show();
showAllFlag = true;
}
btnShowAll.on('click', showAllTitles);
});
Or follow by this link: enter link description here

Change your function to this:
$(function() {
$('#div1').hover(function() {
$('#div1h1').fadeIn();
});
});
$(function() {
$('#div2').hover(function() {
$('#div2h2').fadeIn();
});
});
$(function() {
$('#div3').hover(function() {
$('#div3h3').fadeIn();
});
});

Assuming that you just want the H1 to fade in and for them to stay visible on hover, just have the following code:
<script>
function Show() {
$('#div1h1').fadeIn();
$('#div2h2').fadeIn();
$('#div3h3').fadeIn();
}
</script>
<body>
<button onclick="Show()">Show all</button>
<div id="div1">
<h1 id="div1h1">TEKST</h1>
</div>
<div id="div2">
<h1 id="div2h2">TEKST</h1>
</div>
<div id="div3">
<h1 id="div3h3">TEKST</h1>
</div>
</body>
The JSFiddle link you provided has an extra JavaScript section which is causing the H1 to fade out on hover.

Just don't trigger the fadein if its already visible?
$('#div1').not(":visible").hover(function() {
$('#div1h1').fadeIn();
},
edit - My bad i didn't see that comma :), gimme a second

Button show div without deleting the previous div

So,I have 8 buttons. Each one shows a div when it's pressed.The problem is that when I press multiple buttons , all of them show their divs and don't delete the previous ones. What can I do?
Html:
<button id ="btn1" >a</button>
<button id ="btn2">b</button>
<button id ="btn3">c</button>
<button id ="btn4">d3</button>
<button id ="btn5">e 4</button>
<button id ="btn6">f 5</button>
<button id ="btn7">g 6</button>
<button id ="btn8">h 7</button>
<div id="story">asdaasdasdasdadsasdsds</div>
<div id = "z2">asdaasdadsd</div>
<div id = "z3">asdasdasdad</div>
<div id = "z4">asdasdasdad</div>
<div id = "z5">asdasdasdad</div>
<div id = "z6">asdadsdaad</div>
<div id = "z7">asdads</div>
CSS:
#z1,
#z2,
#z3,
# z4,
#z5,
#z6,
#z7
{ display: none; }
JQuery:
$(function() {
$('#btn1').on('click', function() {
$('#story').fadeToggle(400);
});
$('#btn2').on('click', function() {
$('#z1').fadeToggle(700);
});
$('#btn3').on('click', function() {
$('#z2').fadeToggle(700);
});
$('#btn4').on('click', function() {
$('#z3').fadeToggle(700);
});
$('#btn5').on('click', function() {
$('#z4').fadeToggle(700);
});
$('#btn6').on('click', function() {
$('#z5').fadeToggle(700);
});
$('#btn7').on('click', function() {
$('#z6').fadeToggle(700);
});
$('#btn8').on('click', function() {
$('#z7').fadeToggle(700);
});
});

You can add a class to your div "divToHide" for instance and call
$('.divToHide').hide();
in your click method
here is a fiddle :http://jsfiddle.net/U5PEu/1/
You by the way have an extra space into you css between # and z4

You're not hiding the others because you're not doing anything with them. Try changing all of your on click handlers to be like this:
$('#btn1').on('click', function() {
// hides currently shown divs
$('.visible').removeClass('visible').fadeOut(700);
// shows div in question, and adds a class that can be queried later
$('#story').addClass('visible').fadeIn(400);
});
The "visible" class that is added can be used to collect and remove any visible divs (or any element, really), regardless of what showed them.

JQuery Is not working properly on mouseenter and mouseleave

Hi I am making an effect that is when Mouse Enter in div one button shows in that div and when user mouse leave that area again button hide.
It works but the problem is that I have used div many times so I have used class for div definition.
So when Mouse enter in one div other div also affected.
Code :
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#container").mouseenter(function(){
$(":button").show();
});
$("#container").mouseleave(function(){
$(":button").hide();
});
});
</script>
jsp code :
<div id="container">
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=3">
<img src="product_images/Tulips1760331818.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">Nokia Lumia 925</div></div>
<div class="mainitemlistprice"><div align="center">38000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
<div class="mainitemlist">
<div class="mainitemlistimage">
<a href="product?pid=5">
<img src="product_images/Jellyfish456319058.jpg" height="125px" width="100px" style="border-radius:2px;">
</a>
</div>
<div class="mainitemlistname"><div align="center">HCL Me</div></div>
<div class="mainitemlistprice"><div align="center">40000</div></div>
<div class="mainitemlistfeatures"><div align="center">null</div>
<button type="button" style="display: none;">Hide me</button></div>
</div>
</div>
I have try to put Jquery on class="mainitemlist" but It's not working.
So I have added in id="container".
Anyone have idea, why it's not working ???

You can do this:
$(document).ready(function () {
$(".mainitemlist").mouseenter(function () {
$(this).find(":button").show();
}).mouseleave(function () {
$(this).find(":button").hide();
});
});
Demo: Fiddle
When you used the class mainitemlist you were not using the function scope properly using $(this) and hence it showing all the button on mouseenter, since you used the code:
$(":button").show();
UPDATE
$(document).ready(function () {
$(document).on('mouseenter', '.mainitemlist', function () {
$(this).find(":button").show();
}).on('mouseleave', '.mainitemlist', function () {
$(this).find(":button").hide();
});
});

try:
$(document).ready(function(){
$("#container").mouseenter(function(){
$("#container button").show();
});
$("#container").mouseleave(function(){
$("#container button").hide();
});
});
check out this fiddle.
b.t.w, you have 2 divs with the id of container. this is probably a mistake, and if not, it's bad practice.
hope that helps.

$("#container").mouseenter(function(){
$(this).find('#yourbutton').show();
});
$("#container").mouseleave(function(){
$(this).find('#yourbutton').hide();
});