Extend javascript function into dynamically loaded file - javascript

this is the problem:
I' have a page with some .js files embedded, in this files there are some javascript functions.
Now, if I load some content into my page using jQuery load function, the functions before mentioned not affect the new included elements...
What can I do?
function say_ciao(){
alert('Ciao!!!');
}
$('#home_button').on('click', function(){
say_ciao();
});
$('#load_button').on('click', function(){
$('#loader').load('externalpage.php');
});
http://jsfiddle.net/Ppvpp/
Thanks alot for your answers and sorry for my english!

Use event delegation. If the user clicks an element, it'll 'click' all parent elements of that element too. You can use this behaviour:
Instead of
$('#home_button').on('click', function(){
use:
$('selector for parent of that button').on('click', '#home_button', function() {
...
}
The problem is that on the moment you call your function, it'll bind the handler to all elements it matches at that point. If you add a new element that matches that selector, it won't have the handler attached to it (the moment you attached the handler to the elements has already passed). The trick is to attach the handler to a parent object instead (an object that doesn't get dynamically added), and only execute the function if the clicked element matches the selector string in the second argument of .on(). See the docs.

Related

Changed data attribute not recognized in jquery selector

I've the following html structure
<body data-page="first">
<div class="start">Test</div>
</body>
and the following js
$('body[data-page="first"] .start').on('click',function (){
body.attr('data-page','second');
});
$('body[data-page="second"] .start').on('click',function (){
console.log('Test');
});
I would expect, that after the second click on .start, the console would show "Test", but it doesn't...
Can you tell me what I'm doing wrong?
Thanks in advance!
While you have your answer, I don't think the essential point has been made in any of the answers so far, and that is that the binding of an event handler must happen after the target element exists.
When you try to bind an event handler to a particular element in the DOM, the element must exist at the time. If it does not exist, the handler has nothing to bind to, and so the binding fails. If you later create the element, it's too late, unless you re-run the binding statement.
It will soon become second nature to call appropriate event handler binding statements after you create a new element (by modifying the HTML using javascript) that needs a handler.
For instance, in my current project I regularly make AJAX calls to a server to replace blocks of HTML as things happen on the page. Even if some of the new elements are exactly the same as the ones being replaced, they will not inherit any bindings from the replaced elements. Whenever I update the HTML I call a function that contains necessary statements to bind my event handlers to the new copy of the active elements.
Your code would work if you made the following change:
$('body[data-page="first"] .start').on('click',function ()
{
body.attr('data-page','second');
$('body[data-page="second"] .start').on('click',function (){
console.log('Test');
});
})
A couple of other (off-topic, but related) points:
It's possible to bind a handler to an element multiple times. The trick to avoiding this is to include the .off() method in the chain before binding (noting though that .off("click") will unbind all click handlers bound to that element, not just yours) e.g.
$("#mybutton").off("click").click(function(){myHandler()});
"the arrow function doesn’t have its own 'this' value" () so don't use arrow functions in event handlers if you plan to reference any of the element's properties via 'this'. e.g.
$("#mybutton").off("click").click(() => {console.log(${this.id})}); // >> "undefined"
The issue is that the page is rendered with the data-page set to first, and when you click again on it, that part of javascript still see "first", since is not rerendered, so you need a dynamic function, the read all the intereaction with that button, and than check wich value that attribute has. Like this you can make infinite cases, and still go on.
$('body .start').on('click',function (){
const attr = $('body').attr('data-page');
if(attr === 'first') {
$('body').attr('data-page','second');
} else {
console.log('second');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body data-page="first">
<div class="start">Test</div>
</body>
And if you don't like the fact that is targetting all the "body" wich is weird, becouse you should have only 1 body, you can use an ID to target the right one
PS: is never a good idea to duplicate your function, if you can set everything in a dynamic function, that reads everything, is easier to debug in the feature, and is lighter and more clean to work on
$('body[data-page="first"] .start').click(function (){
var body = $('body[data-page="first"] .start');
body.attr('data-page','second');
});
This method can help :
var timesClicked = 0;
$('.start').on('click',function (){
timesClicked++;
if (timesClicked>1) {
console.log('Test');
}
});

How to select elements added via javascript [duplicate]

This question already has answers here:
adding jQuery click events to dynamically added content
(4 answers)
Closed 9 years ago.
I have a simple code that check a select change and alert a message. This is working ok but when I insert new .select-payment elements on the page this method is only available to the first one and not the ones created via javascript
$(document).ready(function() {
return $(".select-payment").on("change", function() {
return alert("hello");
});
});
Any idea how to make it work for any element that is added after the page is loaded that has a .select-payment class?
$(document).on("change", ".select-payment", function() {
alert("hello");
});
Also returning from within the change handler hardly makes sense, even less, returning the result of an alert.
You could use event delegation like below,
$(document).on('change', '.select-payment', function () {..
Replace the document with any closeby container that exist in DOM when executing the above line
Event delegation binds the event to the parent element and executes the handler when event.target matches the specified selector.
When targeting dynamically created elements, you need to use .on()'s delegated syntax:
$(document).on("change", ".select-payment", function() {
From the docs:
Event handlers are bound only to the currently selected elements; they
must exist on the page at the time your code makes the call to .on().
To ensure the elements are present and can be selected, perform event
binding inside a document ready handler for elements that are in the
HTML markup on the page. If new HTML is being injected into the page,
select the elements and attach event handlers after the new HTML is
placed into the page.
why are you putting return statement ? You must attach your event handler to the document and not the existing .select-payment.
Try this : $(document).on("change",".select-payment",function(){...});
$(document).on("change", ".select-payment", function () {
alert("hello"); }
);
You can replace document with any closer parent element which will always exist in DOM for better performance. Like
$('#closestId').on("change", ".select-payment", function () {
alert("hello");
}
);
if you use $("document") jQuery will search for a node/tag named as document like and wont find anything as document is actually an object.
But you could use $("body") as body is a node/element of DOM.

Calling a function , when element is Live

How can i call a function when element is live, i think we just raise a function by raising an event by live..
$('#a').live('click',function(){
//some code
});
but i need a function to be called when element is lived,Any Idea.
The context is
initially i dont have a select box , if i got a particular select box
then i want call a function that pushes result into it..
you can use on delegate event...
$(document).on("click",'#a',function(){
alert(clicked);
});
however,it is always recommended that you use the closest static elements that are in the HTML markup, then $(document) for better performance.. you can read more about on delegate event here..
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page
Live is deprecated and removed on jQuery 1.9. Use .on()
This enable click on any element with id #a added after page is loaded
$(document).on('click','#a',function(){
//Code here
});

Attaching event listener to dynamically generated image in jQuery?

I am adding images to my page dynamically with jquery. Basically I am creating "pixel-y / lo-res" versions of the images on the page, and adding the at page load overtop of the originals. Then a typical "fade-out on hover" thing should fade them out on mouseover, showing the orignals.. as if "up - rezing" .. if that makes sense.
So I've got the images coming in.. but somehow the hover listener isn't attaching. At first I tried hover, now I'm on click just because it is easier to troubleshoot. Nothing.
The .on() function should attach itself even to dynamically added items, right? What is going wrong? I'm not getting any errors. It's just not working.
$.ajax({
type:"POST",
url:"js/pixelsandwich/pixelsandwich.php",
data:{src:src},
success:function(response){ // if there is already a "lo-rez" image, I get that URL.. if there isn't, one is created and I return that URL
newImg = $("<img class='crunched'>"); // create the new <img>
newImg.attr('src', response); // assign the source
frame = $that.parent(); // grab the containing frame
frame.append(newImg); // add the new image. css:position:absolute and z-index take care of the rest
}
});
$(".crunched").on("click", function(){ // << this just isn't attaching at all
alert("hello");
$(this).fadeTo('slow',0.5);
});
Cn anyone help?
The .on() function should attach itself even to dynamically added
items, right?
Nope, with dynamically created elements you have to bind using .on() to an element that already exists when the code is run. Worst case is usually the body element, but the closer an element you can pick in the DOM the better.
Assuming that .crunched is the class of your dynamically added elements, try:
$("body").on("click", ".crunched", function(){ // << this just isn't attaching at all
alert("hello");
$(this).fadeTo('slow',0.5);
});
Per the jQuery docs:
Event handlers are bound only to the currently selected elements; they
must exist on the page at the time your code makes the call to .on().
To ensure the elements are present and can be selected, perform event
binding inside a document ready handler for elements that are in the
HTML markup on the page. If new HTML is being injected into the page,
select the elements and attach event handlers after the new HTML is
placed into the page.
The on method should be used to delegate event handling to an extant ancestor of the dynamically added elements. For example:
$(document).on("click", ".crunched", function(){ // << this just isn't attaching at all
alert("hello");
$(this).fadeTo('slow',0.5);
});
The collection $(".crunched") is empty when you run your code, so the event handler isn't being attached to anything.

jquery issue with on and live

I have the following code:
var $reviewButton = $('span.review_button');
$reviewButton
.live('click',
function(){
$('#add_reviews').show();
}
)
Later in the script, I use an AJAX call to load some content and another instance of $('span.review_button') enters the picture. I updated my code above to use '.live' because the click event was not working with the AJAX generated review button.
This code works, as the .live(click //) event works on both the static 'span.review_button' and the AJAX generated 'span.review_button'
I see however that .live is depracated so I have tried to follow the jquery documentations instructions by switching to '.on' but when I switch to the code below, I have the same problem I had before switching to '.live' in which the click function works with the original instance of 'span.review_button' but not on the AJAX generated instance:
var $reviewButton = $('span.review_button');
$reviewButton
.on('click',
function(){
$('#add_reviews').show();
}
)
Suggestions?
The correct syntax for event delegation is:
$("body").on("click", "span.review_button", function() {
$("#add_reviews").show();
});
Here instead of body you may use any static parent element of "span.review_button".
Attention! As discussed in the comments, you should use string value as a second argument of on() method in delegated events approach, but not a jQuery object.
This is because you need to use the delegation version of on().
$("#parentElement").on('click', '.child', function(){});
#parentElement must exist in the DOM at the time you bind the event.
The event will bubble up the DOM tree, and once it reaches #parentElement, it is checked for it's origin, and if it matches .child, executes the function.
So, with this in mind, it's best to bind the event to the closest parent element existing in the DOM at time of binding - for best performance.
Set your first selector (in this case, div.content) as the parent container that contains the clicked buttons as well as any DOM that will come in using AJAX. If you have to change the entire page for some reason, it can even be change to "body", but you want to try and make the selector as efficient as possible, so narrow it down to the closest parent DOM element that won't change.
Secondly, you want to apply the click action to span.review_button, so that is reflected in the code below.
// $('div.content') is the content area to watch for changes
// 'click' is the action applied to any found elements
// 'span.review_button' the element to apply the selected action 'click' to. jQuery is expecting this to be a string.
$('div.content').on('click', 'span.review_button', function(){
$('#add_reviews').show();
});

Categories