jquery DOM mutation - javascript

I have made this:
<span class="a">test 1</span><div></div>
Why .b does not activate the alert?
$( ".a" ).click(function() {
$('div').html('<span class="b">test 2</span>');
});
$( ".b" ).click(function() {
alert("Hello");
});
I do not understand how to detect the mutation of the DOM.

since .b is created after the query was done. when you call $(".b") in your script nothing is found, and the click event is not attached to it. You can solve it by attaching the event to the document like so:
$(document).on("click", ".b", function () {
alert("hello");
});

The click() binding you're using is called a "direct" binding which will only attach the handler to elements that already exist. It won't get bound to elements created in the future. To do that, you'll have to create a "delegated" binding by using on().
$('div').on("click", ".b", function () {
alert("hello");
});

The selector runs on execution, meaning that .b was already searched for when the page loaded, rather than after you added the dom.
To demonstrate how selectors run in line, the code works if you define it right after appending the element:
$( ".a" ).click(function() {
$('div').html('<span class="b">test 2</span>');
$( ".b" ).click(function() {
alert("Hello");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="a">test 1</span><div></div>
However, the correct way of doing this would be to define a parent-based selector. The following is setting a click event to the parent that filters the target for the .b selector.
$( ".a" ).click(function() {
$('div').html('<span class="b">test 2</span>');
});
$(document.body).on("click", ".b", function () {
alert("Hello");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="a">test 1</span><div></div>

Related

Use one() in inline onclick attribute

I have a function that is triggered on an inline onclick.
What I want is for that function to get called only once but don't know how to do that with an inline onclick. It's working at the moment but runs everytime the user clicks rather than just once.
This is how I have it:
HTML
<div class= "container" onclick="modal('#modal')"></div>
I have tried having it as a Jquery function as follows and remove the above click but that is not working either:
$(".container").on( "click", modal( '#modal') {
alert( "The event happened!" );
});
Any idea how to make it so the function only runs once?
Thank you
If you wish to use jQuery's one(), you'll need to remove the onclick from the HTML, and change the JS to read:
$( ".container" ).one( "click", function() {
alert( "The event happened!" );
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "container">Container</div>
This way, the alert() will only show on the first click.
If you wish to use the on() as stated in your question, use $(this).off('click'); to remove the event listener after the fist press:
$( ".container" ).on( "click", function() {
alert( "The event happened!" );
$(this).off('click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class= "container">Container</div>

How to click a button element on page load

I have created 5 buttons. I'm loading some pages on button click. I want the first button automatically clicked on page load and load it's corresponding html file and the remaining buttons should load html files only on clicking them. Someone help me!!
This is my jquery:
$('a#Home').click(function() {
$("#home").load("x.html");
});
$('a#Menu1').click(function() {
$("#menu1").load("y.html");
});
$('a#Menu2').click(function() {
$("#menu2").load("z.html");
});
$('a#Menu3').click(function() {
$("#menu3").load("searcharray.html");
});
$('a#Menu4').click(function() {
$("#menu4").load("sortarray.html");
});
Just test this code. I think this will help you.
$( document ).ready(function() {
console.log( "ready!" );
$('#btn1').trigger( "click" );
});
function fun1()
{
alert('loaded');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1" onclick="fun1()">btn1</button>
<button id="btn2">btn1</button>
<button id="btn3">btn1</button>
<button id="btn4">btn1</button>
trigger the event yourself:
$('a#Home').click(function() {
$("#home").load("x.html");
});
$('a#home').trigger('click');
Theoretical answer
You can trigger any event on any element using the .trigger() method. This will require you to specify which event you want to fire. More information.
It is also possible to trigger a click event just by calling .click() after binding the event handling. The documentation shows us that we can use this function for both purposes.
$( document ).ready() is an interaction that can be used to run code once when the document has been loaded. More info on that can be found here.
Examples
Example #1 (using .trigger())
$( document ).ready(function() {
$('a#Home').trigger('click');
});
Example #2 (using .click())
$( document ).ready(function() {
$('a#Home').click();
});
Assuming the first button is Home then you want run that on document ready by using $(function()
<script>
$(function() {
$('a#Home').click();
});
function loadHome() {
$("#home").load("x.html");
};
</script>
Then update your link to be like:
<a id="Home" onclick="loadHome()">Click Me</a>
You can try this:
<script>
function pageLoad()
{
alert('hello');
}
pageLoad();
</script>
<button id="btn1" onclick="pageLoad()">btn1</button>

jQuery click function not working with added class [duplicate]

Tough to come up with the title for this question.
More for proof of concept, I'm wondering why this doesn't work. What I'm attempting to do is use a jquery event to change the ID attribute, then use another jquery event bound to this newly changed ID.
For example:
<?php
echo <<<END
<html>
<head>
<style>
#before {
color:maroon;
}
#after {
color:blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function(){
$("#before").hover(function() {
$(this).attr("id","after");
});
$( "#after" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
</head>
<body>
<p id="before">TEST TEXT</p>
</body>
</html>
END;
?>
On hover over my test text, the color changes from maroon to blue, as expected. It is my understanding that the text would now have an ID of "after" and the click event handler function would apply when clicked. However that is not the case the quick event handler and its associated alert does not appear to trigger.
I am new to jquery is there perhaps an update handlers function I'm overlooking?
It works with the same principle as Event binding on dynamically created elements?.
When you add a event handler to an element where the element is found using a selector, the selector is executed only once when the code is executed after that the handler is added to the element. Once is has happend if you change the selector values associated with the element it will not reflect in the attached handlers.
For example in your case you are adding the a handler to the element with id before in dom ready handler, so once the dom ready event is fired your selector is evaluated and it returns a single element to which you are adding the handler. In the same dom ready handler you are trying to add a click handler to an element with id after, but at dom ready there are no elements with that id so that handler is not attached to any element.
Now at a later time you are changing the id of the elemnet, but it will not affect in the already attached handler nor will it add a new handler.
The solution here is to use a mechanism known as event delegation.
Demo:
$(document).ready(function() {
//there is no need to use hover as your want to add the class when the mouse enter the element and you don't want to do anything in mouseleave
$("#mytarget").mouseenter(function() {
$(this).addClass("after").removeClass('before');
});
//look at the use of event delegation
$(document).on('click', '.after', function() {
alert("Handler for .click() called.");
})
});
.before {
color: maroon;
}
.after {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="mytarget" class="before">TEST TEXT</p>
You can fire the click event after the hover event
$(document).ready(function(){
$("#before").hover(function() {
$(this).attr("id","after");
$( "#after" ).click(function() {
alert( "Handler for .click() called." );
});
return false;
});
});

Jquery addClass for an added class [duplicate]

Tough to come up with the title for this question.
More for proof of concept, I'm wondering why this doesn't work. What I'm attempting to do is use a jquery event to change the ID attribute, then use another jquery event bound to this newly changed ID.
For example:
<?php
echo <<<END
<html>
<head>
<style>
#before {
color:maroon;
}
#after {
color:blue;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<title>Test</title>
<script type="text/javascript">
$(document).ready(function(){
$("#before").hover(function() {
$(this).attr("id","after");
});
$( "#after" ).click(function() {
alert( "Handler for .click() called." );
});
});
</script>
</head>
<body>
<p id="before">TEST TEXT</p>
</body>
</html>
END;
?>
On hover over my test text, the color changes from maroon to blue, as expected. It is my understanding that the text would now have an ID of "after" and the click event handler function would apply when clicked. However that is not the case the quick event handler and its associated alert does not appear to trigger.
I am new to jquery is there perhaps an update handlers function I'm overlooking?
It works with the same principle as Event binding on dynamically created elements?.
When you add a event handler to an element where the element is found using a selector, the selector is executed only once when the code is executed after that the handler is added to the element. Once is has happend if you change the selector values associated with the element it will not reflect in the attached handlers.
For example in your case you are adding the a handler to the element with id before in dom ready handler, so once the dom ready event is fired your selector is evaluated and it returns a single element to which you are adding the handler. In the same dom ready handler you are trying to add a click handler to an element with id after, but at dom ready there are no elements with that id so that handler is not attached to any element.
Now at a later time you are changing the id of the elemnet, but it will not affect in the already attached handler nor will it add a new handler.
The solution here is to use a mechanism known as event delegation.
Demo:
$(document).ready(function() {
//there is no need to use hover as your want to add the class when the mouse enter the element and you don't want to do anything in mouseleave
$("#mytarget").mouseenter(function() {
$(this).addClass("after").removeClass('before');
});
//look at the use of event delegation
$(document).on('click', '.after', function() {
alert("Handler for .click() called.");
})
});
.before {
color: maroon;
}
.after {
color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p id="mytarget" class="before">TEST TEXT</p>
You can fire the click event after the hover event
$(document).ready(function(){
$("#before").hover(function() {
$(this).attr("id","after");
$( "#after" ).click(function() {
alert( "Handler for .click() called." );
});
return false;
});
});

.click event don't work on a certain div ID conflict?

I try to execute a function when I click on a specific div ID and nothing happens, help! Example:
$( "#jwplayer-1_wrapper" ).click(function() {
alert( "Handler Clicked" );
});
-> Full example here <-
Check this
http://jsfiddle.net/2mK7Z/22/
$(document).ready(function(event)
{
$('#jwplayer-1_wrapper').mousedown(function() {
alert('click detetced');
});
});
I think this is the problem you are experiencing: Track a click on a flash movie (object / embed) with jQuery
That is - the embedded flash object steals the click event, and jquery will never see it.
Do you create the element dynamically? It could be that the element doesn't exist at document ready. Try:
$("body").on("click", "#jwplayer-1_wrapper", function() {
alert("Handler clicked");
})
Otherwise, check the ID and make sure it's correct.
You have to wait for the DOM to become ready. Use jQuery(document).ready
$(document).ready(function() {
$( "#jwplayer-1_wrapper" ).click(function() {
alert( "Handler Clicked" );
});
});

Categories