Attaching events to dynamic elements in wordpress - jquery - javascript

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');
});

Related

jQuery blur() not listening to $(this)

Followed by the HTML DOM:
<div class="opt">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
When i click on the .opt it would show the .panel content, but then i need to trigger another event to hide the .panel when clicking outside of the .opt element.
jQuery:
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
$this.blur(function(){
$this.find('.panel').fadeOut();
alert('i am from blur');
});
});
Here is a demo JsFiddle
But the blur() method is not executing, what i am doing wrong here technically?
You can try a click event on body instead of blur. Take a look at
https://jsfiddle.net/y0wsfpvb/7/
$('.opt').click(function(){
var $this = $(this);
$this.find('.panel').fadeIn();
});
$('body').click(function (e){
if( $(e.target).closest(".opt").length > 0 == false) {
$('.panel').fadeOut();
alert('fake blur');
}
});
This works if you define de tabindex property for the div...
Try:
HTML
<div class="opt" tabindex="3">
Options
<div class="panel">
<h3>i am in panel!!</h3>
</div>
</div>
JS
$('.opt').click(function(){
$(this).find('.panel').fadeIn();
$(this).blur(function(){
$(this).find('.panel').fadeOut();
alert('i am from blur');
});
});
You could bind the fade out action to the body's on click handler, and then add:
event.stopPropagation();
to your opt class click handler to achieve this.
Here is an example on codepen

Button inside of div not working after clone

Trying to build a dashboard that lets me test animations while linking and unlinking boxes. Got everything working, but when I add the link function, I found that the link doesn't work after the parent element has been cloned. I want it to work so that when someone clicks the left box, the right two boxes show whatever animation is selected as long as the link is active. If the link is inactive, the unlinked box does not animate. Using animate.css for the animations.
Here's the html:
<div id="animations-container">
<center>
<button name="slideInLeft" class="animation-selector selected">Slide In Left</button>
<button name="slideInDown" class="animation-selector">Slide In Down</button>
<button name="zoomInUp" class="animation-selector">Zoom In Up</button>
<button name="zoomIn" class="animation-selector">Zoom In</button>
<button name="pulse" class="animation-selector">Pulse</button>
<button name="wobble" class="animation-selector">Wobble</button>
<button name="shake" class="animation-selector">Shake</button>
</center>
</div>
<div id="container">
<div id="graphs">
<div class="block"><div class="content-block" style="height:280px; background-image:url(current-open-issues-by-opco.png);"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:237px; background-image:url(days-remaining-to-remediate-open-issues.png);"></div><div class="link-icon"></div></div>
<div id="linked" class="linked block animated slideInLeft"><div class="content-block" style="height:350px; background-image:url(root-cause-of-ltm-issues.png);"></div></div>
</div>
<div style="clear:both;"></div>
</div>
and here's my jquery:
<script>
$(function() {
$(".linked-button").on('click', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
});
$(function() {
$(".animation-selector").on('click', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
});
$(function() {
$(".link-icon").on('click', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
});
});
Also replicated it in jsfiddle: https://jsfiddle.net/3hjfj/
Update - working! Thanks - this was my first stackoverflow question - nice to get my cherry popped. Here's the new code:
$(function() {
$('body').on('click', '.linked-button', function() {
$('.linked').remove().clone(true, true).appendTo('#graphs');
});
$('body').on('hover', '.linked-button', function() {
$('.link-icon').toggleClass("link-hover");
});
$('body').on('click', '.animation-selector', function() {
var animation = $(this).attr("name")
// console.log("changeclass");
$(".linked").removeClass().addClass('linked block animated');
$(".linked").addClass(animation);
$("#animations-container :button").removeClass('selected');
$(this).toggleClass('selected')
});
$('body').on('click', '.link-icon', function() {
$(this).toggleClass('faded');
$(this).parent().toggleClass('linked');
$('.transparent-blue').fade();
});
$('body').on('mouseenter', '.link-icon', function() {
$('.transparent-blue').show();
});
$('body').on('mouseleave', '.link-icon', function() {
$('.transparent-blue').hide();
});
});
Apart from not needing multiple document ready functions, the event handlers are applied only to the objects with those classes that exist at the time they are run, so the cloned objects do not get them. Try this instead:
$("document").on("click", ".link-icon", function() {
$("document").on("click", ".animation-selector, function() {
and
$("document").on("click", ".linked-button", function() {
Use this for dynamically created elements:
$('body').on('click', '.animation-selector', function() {
// do something
});
$('body').on('click', '.link-icon', function() {
// do something
});

append UI element only once and avoiding event propagation

I have a problem with my ui element (icon) with is a holder for draggable() function. the icon should append on click only once. The problem with my code is that when I am clicking on the icon it runs the code again and appending the next icon.
How avoid the event propagation in this case.Is there a better way to use the one() function here.
my code:
HTML structure:
<div class="editor">
<h1>Title</h2>
<p>paragraph</p>
<img src="">
</div>
<div class="editor">
<h1>Title</h2>
<p>paragraph</p>
<img src="">
</div>
<div class="editor">
<h1>Title</h2>
<p>paragraph</p>
<img src="">
</div>
JS:
$(document).on('click', '.editor *', function(event) {
$(this).resizable();
$(this).draggable({ handle: ".editor-move" });
$(this).one($(this).append("<i class='icon-move editor-move'></i>"));
return false;
});
Firstly, you need to make sure that the current target of the event is not the icon-move element, if so then exit.
if ($(event.target).hasClass("icon-move"))
return false;
Secondly, check whether the icon has been added already on subsequent clicks to avoid added multiple icons for the same element.
if($(".icon-move",this).length==0)
$(this).append("<i class='icon-move editor-move'></i>");
JSFiddle
$(document).on('click', '.editor *', function(event) {
event.stopPropagation();
$(this).resizable();
$(this).draggable({ handle: ".editor-move" });
$(this).one($(this).append("<i class='icon-move editor-move'></i>"));
return false;
});
Try
$(document).one('click', '.editor *', function(event) {
$(this).resizable();
$(this).draggable({ handle: ".editor-move" });
$(this).append("<i class='icon-move editor-move'></i>");
return false;
});

Detect button click inside jQuery mobile collapsible

I'm using jQuery mobile and I was trying to add a button inside a collapsible but the problem is that when i click on the button the click event is not fired but instead the block gets uncollapsed or collapsed.
I tried the code below but it didn't work
$(document).on('pagebeforeshow', '#page', function () {
$('#header').on('click', '#start', function (e) {
alert("click");
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
});
<div data-role='collapsible' data-theme='c' data-content-theme='d' data-collapsed icon='arrow-d' data-expanded-icon='arrow-u' data-iconpos='right'>
<h4 id='header'>
<input type='button' data-theme='c' value='Demarrer' data-mini='true' data-inline='true' data-icon='mappin' data-icon-pos='top' id='start'/>
</h4>"
</div>
that's because your button exists inside the collapsible section. What you can do is prevent the section from collapsing when the button is clicked i.e get the id of the target clicked and if it's the id="start" then e.preventDefault(); so something like this:
$('#header').on('click', function (e) {
var id = e.target.id;
if(id=="start"){
alert("click");
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
}
});

Delegate/Live Failure. Can't bind events after Prepending an element

EDIT--- I realized that the problem here was that the click handler that was bound to the element had to be unbound before I could bind another click handler handler.
I want to allow the user to select/unselect items by click on the element in question. The elements start in an "options" box and if clicked, move to a "selected box". If they are then clicked in the selected box, the elements move back to the original options box.
Can't figure out why delegate() and live() are not working here. I assume this has to do with prependTo() or appendTo().
$('#amen_options .options p').click(function(e){
$(this).appendTo('#amen_selected .options');
e.stopPropagation();
e.preventDefault();
});
/*
$("body").delegate('#amen_selected p', 'click', function(e){
#(this).appendTo('#amen_options .options');
e.stopPropagation();
e.preventDefault();
});
*/
$('div#amen_selected div.options p').live('click',function(e){
$(this).appendTo('#amen_options .options');
e.stopPropagation();
e.preventDefault();
});
Here's the markup:
<div>
<div id="amen_options">
<h3>Click to Select</h3>
<div class="options">
<p data-option="">One</p>
<p data-option="">Two</p>
<p data-option="">Etc...</p>
</div>
</div>
<div id="amen_selected">
<h3>Selected</h3>
<div class="options">
</div>
</div>
The first click works (sending p elements from options to selected box). Once in selected, though, no event handlers are binding. The firebug console isn't showing an error. Normally, I'd assume that this is a markup problem, but I've checked it repeatedly.
Thanks!
It looks like delegate() works good.
http://jsfiddle.net/fLXgU/1/
$('body').delegate('#amen_options .options p', 'click', function(e) {
$(this).appendTo('#amen_selected .options');
return false;
});
$('body').delegate('#amen_selected .options p', 'click', function(e) {
$(this).appendTo('#amen_options .options');
return false;
});

Categories

Resources