We Keep Coding

Issue with execute trigger on custom button > Apexchat

I have written a trigger for a custom button click open chat window; I want this trigger to be executed when clicked on a custom button in a Case object.
I am using Apexchat. My code is,
Live Chat
jQuery(window).load(function() {
jQuery('.live-chat').on('click', function() {
jQuery('#apexchat_prechat_chat_icon').trigger("click");
});
});
Can anyone help me out with this?

As per my understanding, you're using apexchat js plugin, which gets loaded once the UI rendered properly. Hence you'll have to first get the iframe button instance then bind the that within your click scope. Hope the following code may help:
jQuery(window).load(function() {
jQuery('.live-chat').on('click', function() {
//find iframe
let iframe = jQuery('iframe#apexchat_chat_frame');
//find button inside iframe
let button = iframe.contents().find('#apexchat_chat_icon');
//trigger button click
button.trigger("click", function() {
console.log("chat button/link clicked");
});
});
});
Note: I'm considering here the id of iframe is "apexchat_chat_frame" and "apexchat_chat_icon" is the id of the button or link upon click on which, the chat window gets loaded.

span inside of lightbox won't trigger function

I have added a CodePen Demo
I'm trying to make the lightbox close when the close button is clicked. Currently, the lightbox will only "close" or trigger the close function on the background only.
Not sure what I'm doing wrong.
CodePen Demo
So far I have tried these slectors that don't trigger the closing function:
$('.lightbox-item > .close-button')
$('.lightbox-item .close-button')
$('.close-button')

You should bind the click event on the document using $(document).on('click', '.lightbox-item .close-button', function(){ closeLightbox(); }); because the div lightbox-item is empty when you run $('.lightbot-item .close-button').click(function(){ closeLightbox(); }); at the end of your code.
You can also bind the click event after you append the content in the function openLightbox. It would look like this
$(".lightbox-item").append(content);
$('.lightbox-item .close-button').click(function(){ closeLightbox(); });
I created a fork of your pen using the first solution.

Dynamically created div behavior on button click

I went through many post from SO but not able to relate with my scenario.
I have this code on button click. by which User can create as many div on runtime as he wants to on UI.
$('#adddiv').click(function () {
debugger;
$('#main').append('<div class="ara-dynamic-div">
<div class="box box-solid bg-light-blue-gradient">
</Div></div>');
});
code to get buttonclick event from that div
$(document).on('click', '#remove', function () {
showMakeAndHold(this);
});
function showMakeAndHold(obj) {
alert(obj);
$('.ara-dynamic-div').fadeOut();
}
Now the problem is that I have to create multiple dynamic div. and each div will have button to close itself. When I call this function it will close all created div's instead of the one which button is clicked.
I am not able to find the proper div by which request for close come. I am new to DOM and JQuery. not able to relate the things

First of all, if you're using multiple divs you shouldn't give the close button an ID, but a class instead (let's say, .close)
Next you can use event delegation to find the correct element:
$(document).on('click', '.ara-dynamic-div .close', function( event ) {
$(this).closest('.ara-dynamic-div').fadeOut();
} )
The delegator handles all click events in any .ara-dynamic-div .close button, catching them all and allowing you to use $(this).closest(...) to get to the parent container.
Edit: Corrected a mistake

You can use jQuery's .closest() function.
function showMakeAndHold(obj) {
alert(obj);
$(obj).closest('.ara-dynamic-div').fadeOut();
}
JSFiddle

Replace this:
$(document).on('click', '#remove', function () {
showMakeAndHold(this);
});
by this:
$(document).on('click', '#remove', function () {
$(".ara-dynamic-div").not($(this).parents(".ara-dynamic-div")).fadeOut(function () {
$(this).remove();
});
});
Here is the JSFiddle demo
What the code does is that it remove all other .ara-dynamic-div except the one for which the button was clicked.

check for appended object and add function to that object

I've made a modal inside WooCommerce, which displays succes messages and such. I have a problem with the closing of the modal. When the page loads, the modal doesn't exist yet. So I can't apply js to it. How can I apply the function after the modal is appended?
This is what i've tried (in coffeescript):
#closing the modal
if $('.modal-close').length > 0
close = $('.modal-close')
close.click (e) ->
e.preventDefault()
if $('.modal').length > 0
$(this).removeClass "modal-active"
Thanks!

Use event delegation!
The jquery docs have some great info about it here.
$('body').on('click', '.modal-close', function(e) {
e.preventDefault();
$('.modal-active').removeClass('.modal-active');
});

How to preprocess the HTML content using Jquery "ON"?

I have very simple jQuery Accordion, it is working fine, now the issues are if i load the accordion content dynamically either from DB or from JSON to page, It is not working, because there is no information to DOM to understand the class or ID which newly injected. so i am trying to use Jquery ON instead live or delegate to capture the injected elements. my sample code is..
jQuery("#header").on("click", function () {
.... my accordion code here
});
but jquery "on" will trigger on any event like click or something, so how to process the accordion html content to keep open in initial level and do further click.
How is this possible? i couldn't fine any solution

Check this: http://jsfiddle.net/RMBpt/
What i added:
var isActive = $(this).is('.on');
if(!isActive) { .. if active, it shouldn't collapse? }
//First element should be active, needs to be after the hide()
$('.accordionButton:first').addClass('on').next().slideDown('normal');
Try using it like this:
$("#wrapper").on("click", ".accordionButton", function(event){
//Your accordian code here
});