Develop Reference

Javascript not working with elements inside modal

I need help.
With bootstrap 3 I made a modal with little form to let administrators/users change the user's password.
I've tried to made the same with bootstrap 4, but I am not be able to execute javascript triggered from anchors or buttons that are inside a modal.
Can you help me??
Example that not working:
$('.classFromElement').on('click', function (e) {
e.preventDefault();
alert('hello world');
});

The modal is probably a dynamically added html element. So it is not part of the DOM yet. You have to go around (delegate the event) via "document" or "html, body" for new elements that are added after window load. I prefer to use "document" because I had times that even the html or body element wasn't even rendered yet + it has a better performance.
Best option and best performance
$(document).on('click','.classFromElement', function(e) {
e.preventDefault();
alert('hello world');
});
OR... Use 'body, html' (Why both? For browser support, they back each other up)
$('body, html').on('click','.classFromElement', function(e) {
e.preventDefault();
alert('hello world');
});

I used to try this and it worked well.
This is when you open the bs modal, then apply event to your button.
$('#myModal').on('show.bs.modal', function () {
$('.classFromElement').on('click', function (e) {
e.preventDefault();
alert('hello world');
});
})

I'm sorry,
I 've seen my error.
I've put the modals before the scripts.
This is the problem. Now is solved.
:(

Click anywhere in the page to close div

I have an overlay div that fades in when I click on a DOM element. I would like to be able to close it when I click anywhere on the page ( except the div itself) but it does not work..
Here is my code:
//Script for showing the DIV called overlay.
<script>
$(function() {
$('#loginfooter').click(function(){
$('#overlay').fadeIn(200,function(){
$('#box').animate({'top':'20px'},'slow');
});
return false;
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
</script>
//Script for hiding the div after clicking anywhere..
<script>
$(document).ready(function(){
$('#overlay').on('click',function(ev){
var myID = ev.target.id;
if(myID!=='overlay'){
$('#box').animate({'top':'-800px'},500,function(){
$('#overlay').fadeOut('fast');
});
}
});
});
</script>

Just replace this:
$('#overlay').on('click', function (ev) {
with this
$(document).on('click', function (ev) {
and try again....
Actually, when you are clicking on the overlay element, the myID variable value is always == 'overlay'. Hence, it never goes inside the if statement.

DEMO 1
$(document).on('click',function(e){
if(!$(e.target).closest('#overlay').length)
$('#overlay').hide();
});
Other possibility without using any delegate event:
DEMO 2
$('#overlay').on('blur', function (e) {
$(this).hide();
});
Even you'll see most people using the first method, using the second one will avoid to have to use any delegate event which is better IMO. You just have to set focus on overlay when open it or when added to DOM, depending your specific case.

Would this work for you: jsfiddle?
I changed this:
if(myID!=='overlay'){
to this
if(myID=='overlay'){
so that you target the overlay instead of the box.

Image not clickable after loaded via AJAX

I have a set of images that are loaded via jQuery AJAX. For some reason, my click handler won't trigger when it is clicked.
JavaScript:
$(document).ready(function()
{
$('img.delete_related_sub').click(function()
{
alert('testing');
});
//I added this part to test, because the above wasn't working...
$(document).click(function(event)
{
alert(event.target.tagName+' '+event.target.className);
});
});
HTML:
<img data-rsid="2" class="delete_related_sub" src="image.png" />
So my 2nd click handler alerts me with "IMG delete_related_sub". But the first one isn't triggered. The is actually in a table that is actually in a pane run by bootstrap tabs, not sure if that'd actually help though.

Try it like this
$(document).on('click', 'img.delete_related_sub', function() {
alert('testing');
});
Just replace document with a static parent of your image.

Use this:
$("body").on('click', 'img.delete_related_sub', function() {
alert('testing');
});
Or, in the success: give this:
$('img.delete_related_sub').click(function() {
alert('testing');
});

Because the line to bind the event runs before the element is added, try using
$(parent).on('click', 'img.delete_related_sub', function() {});
where the parent is a static element that will be there for sure. This works because the event is bound to an element that actually exists, then checks to match your selector. See .on() for more details.
Something like
$(document).on('click', 'img.delete_related_sub', function() {});
would work fine.

$('.delete_related_sub').live("click", function()
{
alert('testing');
});
Use live event to listen clicks

jQuery JS scroll to top on click works only once?

I'm trying to make a page scroll to top when a link is clicked.
Heres what I got so far.
<script>
jQuery(document).ready(function () {
jQuery("ul.pager a").click(function() {
scroll(0,0);
return false;
});
});
<script>
Problem with that code is that it works only on first click.
How to make it work every time I click on a link?

Maybe you could use internal links (href="#top") instead of binding events with jQuery.

jQuery(document).ready(function () {
jQuery("ul.pager a").live("click", function() {
scroll(0,0);
return false;
});
});
try this

Overriding default behaviour of anchor tags using jquery

I am trying to override the default behaviour of an anchor tag so i can load in a web page on my server into the exisiting div, rather than a new tab or window.
so far i have:
myContainer.click(function(){
event.preventDefault();
$('a').click(function(){
var link = $(this).attr('href');
myContainer.load(link);
});
});
In chrome i have to click the link twice before it does anything, in IE an FF it doesnt work at all and refreshes the page with the new link.
Any help is much appreciated.

Shouldn't it be just:
$('a').click(function(e) {
e.preventDefault();
myContainer.load(this.href);
});
Your code assigns a click handler inside a click handler. So the first click will attach the click handler to the link, and the second click (on the link) will execute the new click handler.
It seems you only need one click handler. If the links are added dynamically, you can use .on() (the successor of .live and .delegate):
myContainer.on('click', 'a', function(e) {
e.preventDefault();
myContainer.load(this.href);
});
// or
$(document).on('click', 'a', function(e) {
e.preventDefault();
myContainer.load(this.href);
});

you forgot to pass in event:
myContainer.click(function(event){
event.preventDefault();
$('a').click(function(){ var link = $(this).attr('href');
myContainer.load(link);
});
});
try to rearrange them:
myContainer.ready(function(){
$('a').click(function(event){
event.preventDefault();
var link = $(this).attr('href');
myContainer.load(link);
});
});