Jquery works only on first page load (ajax paganation) - javascript

Only problem: jquery won't trigger the click event of my anchor link for rest of the ajax loaded pages except on first page.
There are already many answers found with this topic but none of them works for me.
Things Ive tried: (pls take a look..I might implement it in the wrong way)
1.) Wrapping with div data-role="page" first before the click event:
$('a[id^="preview"]').wrap('<div data-role="page" />');
//... click event code.. see below
2.) Using the body to capture event on specified link
$('body').on('click','a[id^="preview"]',function(e) {
//... click event code.. see below
3.) Tried putting the script on head or in body.
4.) Tried putting the the script externally or within body.
All of the things I've tried fails. Just working on the 1st page.
Here's my code for the click event and works perfectly on first load (1st page):
$('a[id^="preview"]').on('click',function(e) {
alert('preview clicked');
});
Note:
I'm using $('a[id^="preview"]') because the link are dynamically created with number suffix. e.g. preview1, preview2...etc.

Try to simplify your example and add this code to see if that works if it does expand fromt here.
Demo: http://jsfiddle.net/9hpaL/
$('button').click(function(){
$('body').append('<br><a href="#">Click me<a/>')
});
$('body').on('click', 'a', function(){
alert('It works!');
});

Related

Why isn't click event firing in this simple jsfiddle demo?

I'm trying to create a little demo on jsfiddle, but when I click the toggle button, the click event isn't firing, it says myclick is not defined.
I have looked at other answers which mention the No wrap solution, but I don't see such configuration option in jsfiddle right now.
The jsfiddle: https://jsfiddle.net/5j9qgbxa/4/
Change the load type to No wrap -bottom of the <body>
Here is the Demo
It seems that the javascript with type onload will create the javascript in the beginning of your jsfiddle as followed:
window.onload=function(){
function myclick(){
alert("myclick");
}
}
<YourHTML>
In which case he will not recognize myclick() as this is created later on in the HTML and is not triggered with onload. What you can do to avoid this is as you can see in this jsfiddle: https://jsfiddle.net/cqL9t8mh/1/
What I did here is, delete the onclick="myclick" in your button and replace it with and ID 'btnToggle'. Afterwards in the javascript section you can add an addEventListener of the type click on the ID 'btnToggle' to trigger your myclick function.
Also what you asked in the commands of previous answer is following:
This will make it so your code layout well be like:
<YourHTML>
function myclick(){
alert("myclick");
}
In which case your HTML is first created before your function and it is no longer in an onload so it will now be triggered every time you click your button.

jQuery use .on(load) with ajax loaded content

I have a webpage with AJAX loaded content. If I click on "export" the content reloads and generate an HTML a-Element using PHP:
<a style=\"display:none;\" id=\"menue-export-link\" href=\"download/".$this->select->downloadcsv."\"></a>
Now I want to start the download automatically, so I wrote the following JavaScript code to start the download on a-Element load:
$(document).ready(function () {
$(document).on('load', '#menue-export-link', function() {
console.log('click export');
$('#menue-export-link').click();
$('#menue-export-link').remove();
});
});
But nothing happens, does somebody have any idea?
First of all there is no load or onload event for html anchor elements.
So as #The F said you have to trigger the download in your ajax success callback. Remember to find and trigger it after you have appended the html in your DOM. For more on jQuery ajax http://api.jquery.com/jquery.ajax/
And now comes triggering the download part. Triggering the click event which causes the navigation is a bit trickier. The following question answers that very well jQuery: how to trigger anchor link's click event and
How can I simulate an anchor click via jquery?
Your js is triggered when your main page is loaded and #menue-export-link probably does not exist to that time. If using $.ajax to load that link, place your javascript inside the success callback to make sure that your link exists or is being loaded before triggering your code.
$(document).on("click", "#menue-export-link", function() {
console.log("click export");
});

Click event on dynamically added elements from chrome content script

I am working on building a chrome extension to be used to simplify some of the eCommerce related tasks that we perform. A content script is loaded into every page with jQuery as a dependency mentioned in the manifest.json file. The main objective is to pick out the element being clicked on the loaded page.
While the above logic works in most of the scenarios, there is a couple of websites(one mentioned below that does not seem to register the click event for a few dynamically loaded elements. For example I click on the color swatch and the content script event is triggered, however clicking on the size swatch which has been modified yields nothing).
http://www.solesociety.com/opal-crystal-blue.html
Sample Content script code
$(window).load(function(){
console.log('Content Script Loaded!');
$('body').on('click', function(e){
console.log($(e.target));
});
});
I have gone through several stackoverflow questions that suggest adding the selector as the second parameter to the on function will take in consideration the dynamically elements, but I cannot opt for that as my code relies on any element of the body to be clicked.
Additionally I also did a check to see if mentioning the element as the second parameter gave any results but the outcome was the same.
$('body').on('click', '.sizes li a', function(e){
console.log($(e.target));
});

Jquery Mobile Onclick event does not work before refresh

I Created some button with an onclick event that runs a function that alerts "hi". The onclick event only works if I refresh the page.
Here is the function:
function testme(){
alert("test");
}
And here is the onclick event:
Button
How can I make an onclick event work without having to refresh the page?
You could try not using a function if that is all you doing.
Button
You could also try adding an click event in jQuery
$(document).ready(function(){
$('#someid').click(function(event){
event.stopImmediatePropagation();
event.preventDefault();
alert('hi')
});
});
edit 1
From the question spookycoder suggested:
You could also use rel="external" on the a tag, this will allow it to perform normally on the jQuery Mobile pages.
this worked for me (especially on iPhone/iPad):
Button
I got a workaround for this issue by changing the way I load my pages.
I put target="_self" into the href element so it don't load using the # system - this way the javascript loads with the initial page load while navigating from one page to a nother.
I will put the below link on my index.html page that will navigate to my signup.html page.
Signup
NOTE: You will lose the 'fancy' jQuery Mobile page transition feature
I think you have to use :
$(document).on('pageinit',function(){
//Some Code
});
instead of :
$(document).ready(function (){
//Some Code
});

Can we invoke click function on div class using Javascript

I have implemented colorbox functionality on a div class using
<script type="text/javascript">
$(document).ready(function(){
$(".exampleclass").colorbox({iframe:true, open:true, width:"50%", height:"50%"});
})
</script>
Now I want to know is it possible from Javascript to trigger an event which will dynamically open colorbox without me clicking on the div element.
See Jquery's trigger function
Jquery Trigger
You can call it like this:
$.colorbox({iframe:true, open:true, width:"50%", height:"50%"});
Edit: You may need to run this first:
$.colorbox.init();
Check
http://api.jquery.com/trigger/
and
http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/27e7c70e51ff8a99/98cea9cdf065a524
One of the jQuery Solution you can use
$('selector').trigger('click');
Which will exactly work like a normal click pro-grammatically.
Note for this you've to load jQuery in your page. which can be loaded from one of the CDN server.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
Absolutely, Rahul, opening colorbox through the jquery click() function is easy. But first you'll need to change your docReady code to look more like this:
$(document).ready(function(){
$("#example-id").click(function() {
$(this).colorbox({iframe:true, open:true, width:"50%", height:"50%"})
});
})
Notice here I have placed the code with the "open:true" option inside a click handler. You've probably already seen that having that option runnable right at docReady causes your colorbox to open when the page loads.
Now with the click handler ready, you can simply open the box with - well, a click, of course - but dynamically with this code:
$("#example-id").click();
Wherever you have this, your colorbox will open. So you could place it in an $.ajax() success or error handler or a $.load() completion handler. Also, I used a click handler, but if you don't need the click functionality, you could just as easily have placed the colorbox code in a standard function, then call the function whenever you need it.
By the way, I changed your exampleClass to example-id because having more than 1 element attached to the click handler will produce multiple calls to colorbox. This poses no problem if all classes open the same colorbox. If you are interested in seeing an example of the same class opening differing colorboxes, I can expand on this one (but right off I would start with simply embedding attributes into the tags and looking for them in the click handler).
One last note, colorbox is typically associated with an tag, which will have an href and a title. This is where colorbox will get the contents and caption from. You could simply add href and title tags to your . Html validators won't like the href in the div, though, so if that's important to you then you should just add it to the colorbox options:
$(this).colorbox({href: "http://stackoverflow.com", iframe:true, ... })
Additionally, the function called upon trigger will need to call ColorBox in the mode where it is not assigned to an element.
So the .trigger() method invokes a function that invoke colorbox as shown below.
$.colorbox()
This method allows you to call ColorBox without having to assign it to an element.
Example: $.colorbox({href:'login.php'});
See more at the colorbox docs.

Categories

Resources