Develop Reference

jQuery click event removing first element

Im working on a project and on my .ejs file I have a popup:
<div id="just-claimed-popup2" class="popup">
<h6>You just claimed:</h6>
<h2 id="card-just-claimed"></h2>
<p class="show-message">Show this Screen!</p>
<button id="deletePromoFromHome" class="close-button">Close</button>
</div>
On my javascript file I have a code that creates cards on a loop:
$('#promotion-container footer').before(`
<div class="promo card promo${i}">
<div class="promo-wrapper">
<div class="promo-header">
<h2 class="promo-title">${eventName}</h2>
<span class="close-promo-wrapper"><span class="close-promo"></span></span>
</div>
<div class="promo-info">
<span class="promo-details">
<p class="promo-detail promo-location">${eventLocation}</p>
<p class="promo-detail promo-date">${eventDate}</p>
<p class="promo-detail promo-time">${eventTime}
<span class="promo-description"></span>
<span class="buttonRedemp${i}">
<button class="redddButt load-button2" data="Reedem Card">Reedem Card</button>
</span>
</div>
</div>
</div>
`)
I want the card to disappear when people click 'redddButt', this is my code:
$(`#promotion-container .promo${i} .redddButt`).on('click', function(e){
e.stopPropagation();
$(`div.promo${i}`).addClass('toDelete')
var esc = $.Event("keyup", { keyCode: 27 });
$(document).trigger(esc);
$('#just-claimed-popup2').addClass('reveal');
$('#card-just-claimed').text(eventName);
$('#deletePromoFromHome').click(function(){
$('div.toDelete').fadeOut("slow")
})
})
PROBLEM: it always removes just the first card clicked and if you click the button in another one it stops working, so it only works once. If I console.log something the click event is happening, it's just not running the code inside of it.

Try changing your handler to:
$('body').on('click', `#promotion-container .promo${i} .redddButt`, function(e){
//function stuff here
}
The problem might be that elements are generated after the handler is attached.

Your code is missing some few closing tags. Since the cards are dynamically generated, try using (not tested):
var buttonContext;
$(document).on('click', '#promotion-container .promo .redddButt', function() {
buttonContext = $(this);
// Something
});
$('#deletePromoFromHome').click(function(){
buttonContext.closest('.promo').fadeOut("slow");
});
You can omit this line: $(div.promo${i}).addClass('toDelete');
The cards may have a single class (.promo) instead of (.promo#), unless may be you want to do further manipulation (say different styling etc).
Check this for more details on $(document): https://stackoverflow.com/a/32066793/3906884

cannot click button in changed iframe

Hello I am making a html page were there are 3 spans that the user can click on and each span can change the iframe src below. Each span is associated with its own html page and when the span is clicked it changes the iframe to its own html page.
The problem is that each html page has its own buttons with different buttons and such and in my js file I tried to add .click() to each button and for some reason the only click() works for the main iframe that is the main src of the iframe before it is changed.
Here is the HTML:
<div class="form-group">
<span id="Frame1" class="bla">test 1</span>
<span id="Frame1" class="bla">test 2</span>
<span id="Frame3" class="bla">test3</span>
</div>
<iframe src="test_1_Frame.html" style="width: 870px; height: 436px; border: 0;background-color:transparent;" id="frame">
Here is the code:
$(".bla").click(function(e) {
e.preventDefault();
$("#frame").attr("src", $(this).attr("id")+".html");
let currentFrame = $(this).attr("id");
console.log(currentFrame);
if (currentFrame == "Frame1") {
console.log(currentFrame);
} else if (currentFrame == "Frame2") {
console.log(`${currentFrame} should be Frame2`);
} else if (currentFrame == "Frame3") {
console.log(`${currentFrame} should be Frame3`);
}
});
then for the click part I did this:
$(function() {
$("#frame1_button").click(function() {
console.log('frame1');
})
$("#frame2_button").click(function() {
console.log('frame2');
})
$("#frame3_button").click(function() {
console.log('frame3');
})
});
each of these buttons is its own different button in each frame HTML. but for some reason only the "frame1" logs in the console when I press the frame1_button, but when I press the frame2 or frame 3 button nothing logs in the console.
When I go into the console and try directly typing in to click the button nothing happens(button isn't pressed) and this is the response I get:
If anyone knows why this is happening I would really appreciate your help, Thanks in advance.
(also not a big issue but I would really like to change the background colour of the currently selected span so if anyone knows how to do that I would appreciate a answer or comment).

How about this?
<div class="form-group">
<span id="Frame1" onclick=doSomething(this)>test 1</span>
<span id="Frame2" onclick=doSomething(this)>test 2</span>
<span id="Frame3" onclick=doSomething(this)>test3</span>
</div>
<script>
var doSomething = function(element){
console.log(element.id + " was clicked");
}
</script>
With a code pen here..
With onclick you can pass the element with this, and then access the id.

Open two links when click on 'a'

I have DOM like below:
<body>
<table>
<tbody>
<tr></tr>
</tbody>
</table>
<input type="text" class="pi" value=""><br>
<input type="text" class="vi" value="">
<button>users</button>
</body>
When user clicks on button it appends new 'td' to 'tr'. It works good.
Problem:
On 'a' click I want to open two links. The best would be when first redirects current page to another and second opens seperated window. I tried to change 'a' on another tags, but did not help.
$('button').click(function () {
var pic = $('input[type="text"].pi').val();
var vid = $('input[type="text"].vi').val();
var cont = '<td><a data-big-image="' + vid + '" href="#"><img src="' + pic + '"></a></td>'
$('table').children('tbody').children('tr').last().append(cont);
});
$('a').click(function(e) {
e.preventDefault();
var bigImage = $(this).data('big-image');
window.open(bigImage);
window.open('xyz');
});

Make a link like it's normally done
Next place an inline element (ex. <b>, <span>, etc) inside the link
Then add an inline attribute event handler to the new element.
<a href="https://google.com" target="_blank">
<b onclick="location.href='1st_location.html">GO</b>
</a>
Demo
(does not work due to SO's security measures, see PLUNKER)
<a href="https://google.com" target="_blank">
<b onclick="location.href='https://example.com';">GO</b></a>

Load HTML Elements Only When Button Is Clicked

I have this code and since it will contain many images, I wanted to prevent these images from loading when the page loads to decrease page loading time. My idea was to prevent this code from running unless the user asks to do so by clicking a button. Thus loading the images only when the user wants to see them.
<div style="margin-top:40px;">
<h3><a href='{parse url="showuser={$member['member_id']}&tab=jawards" seotitle="{$member['members_seo_name']}" template="showuser" base="public"}'>{$this->lang->words['awards_title_post']}</a></h3>
<div class="row2" style="padding:7px;">
<foreach loop="profileawards:$awards as $a">
<img class="tooltip" src='{$this->settings['upload_url']}/jawards/{$a['icon']}'
<if test="size:|:$a['width']">
width='{$a['width']}' height='{$a['height']}'
</if>
<if test="toolTip:|:$a['toolTip']">
title='{$a['toolTip']}'
</if>
/>
<if test="awardCount:|:$a['count'] > 1">
<span class='JLogicaAwardsCount'>{$a['count']}</span>
</if>
{$a['hook']['settings']['padding']}
</foreach>
</div>
</div>

You can try following js
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"><<<< this goes in the header
</script>
<script>
$(document).ready(function(){
$(".button").click(function(){
$(".hiddendiv").slideToggle();
});
});
</script>
</head>
<body>
<input type="button" class="button" >123</button>
<div class="hiddendiv">
your data to show
</div>
</div>
</body>
<style>
.hiddendiv {
display:none;
}
</style>

Whatever data that you want to show only when user clicks the button, collect it in a javascript variable.
var myHeavHtml = ""; \\all data with images.
Say there is button on the page id btnLoadImages
var isImagesLoaded = false;
$('#btnLoadImage').on('click', function(e)
{
if(!isImagesLoaded)
{
$('#imgContainer').html(myHeavyHtml);
isImagesLoaded = true;
}
else
{
$('#imgContainer').toggle();
}
});
On the page load, declare a variable isImagesLoaded set to false, means you have not loaded the images. So when it is false, add the html to container div.All other times, just toggle the hide & show.
In this way, the images will not be loaded when the page is loading, it will inserted only when you click the button.
Hope this suffice your requirements.

Get new content from ajax function and replace it on click

I have a single page with a div that gets new content when a user click on a radio button, when the page is loaded it display the main content, when user click on X radio button, that content gets "re-new" or "different" information, there is a DIV id that doesn't change... so...
When user loads the page, I check fro some values, is X value is lower than then replace the div content, on the first load it works fine, but if the user changes options then the first script wont do nothing... so here is the basic html
<div id="options">
<input type="radio" onclick="javascript:checkOut(this.name,'shipr');" value="1" name="shipping" id="s1">
<input type="radio" onclick="javascript:checkOut(this.name,'shipr');" value="2" name="shipping" id="s2">
<input type="text" id="qty" class="hidden" value="1.2" style="display: none;">
</div>
<div id="information">
<div id="prices>$120.00</div>
<div id="products">Multiple[...] and tabs long list</div>
<div id="checkoutbtn">Buy Now</div>
</div>
Basically when user click on any of the radio buttons the content of the div "information" gets replace by ajax information, I'd like to know how do I get the new content and "replace" some values...
Now, the input with the ID qty that is hidden has the value I need is that value is less or grater than I replace the button inside the div with the id checkoutbtn from "buy now" to "Only inside US and UK, please Request a quote"... so, my JS is:
(function($) {
var pkg = $("#qty").val();
var cot = '<a rel="{handler: \'iframe\', size: {x: 570, y: 550}}" ' +
'class="modal" href="qut.php">' +
'<input type="button" value="Quotation" class="btn btn-small">' +
'</a>';
window.onload = function() {
if (pkg < 4 ) {
// do something
// alert('Checked');
$('#checkoutbtn').html(cot);
}
};
$('input:radio[name="shipping"]').change(
function(){
if ($(this).is(':checked') && $(this).attr("id") == 's1') {
// alert(pkg);
$('#checkoutbtn').html(cot);
} else if ($(this).is(':checked') && $(this).attr("id") == 's2') {
$('#checkoutbtn').html(cot);
}
});
})(jQuery);
When the page is load for the first time it works fine, and if it wasn't for the ajax that change the content of the div with the id information it would be flawless, but is not...
As you can see I have this piece of code: $('input:radio[name="shipping"]').change() ... so now I need something that would give some time to load the new content or to check when the new content is ready and then execute this other code $('#checkoutbtn').html(cot); ... the question is, how do I do that... if I put a timeout of 2 seconds it might work, but sometimes it takes 3 or 5 seconds for the new information to be ready and available to the user and that would be a problem...
So, I need to check when the new content is ready after the user has click on the radio button, how do I do that?
Thank you.