If you go to http://www.elemovements.com and try clicking "Read more..." on the first article, it will work, along with if you click the same link in the archive. This is all taken care of by this block of code... it's messy, yes, but I've been trying to figure various ways of doing it.
( function() {
var $Body = $("#news .inner");
var $Title = $("#news .title");
var strNewsURL = "<?=URL_NEWS?>";
$(document).on("click", "a:contains(Read More...)", function(event) {
var strOld = $Body.html();
var strURL = $(this).attr("href").replace("index.php", strNewsURL);
//var strBackURL = strURL.match(/archive.php/) ? "archive.php?xnewsaction=getnews&newsarch=" + getURLVars(strURL)['newsarch'] : strNewsURL;
$Body.slideUp(100);
$.get(
strURL,
objNHF,
function(strData) {
$Body.html(strData + '<a class="back"><?=TEXT_BACK?></a>').slideDown(1000, "easeOutBounce");
$(document).on("click", "#news a.back", function(event) {
$Body.slideUp(100, function() {
$(this).html(strOld);
} ).slideDown(1000, "easeOutBounce");;
event.preventDefault();
} );
}
);
track(strURL);
event.preventDefault();
} );
} )();
If you try loading another page (let's say, "Contact"), then click "Home" again, the event fires but does not load the content into the div. What am I doing wrong here? Very puzzling.
These variables are declared outside of your on/live click. When the new content is loaded, these elements are replaced and the variables point to the old copy.
var $Body = $("#news .inner");
var $Title = $("#news .title");
Move these variables inside the click so they are refreshed each time:
$(document).on("click", "a:contains(Read More...)", function(event) {
var $Body = $("#news .inner");
var $Title = $("#news .title");
...
I don't think you can use pseudo selectors for a delegated event handler. To fix this just use the HTML structure around the links to your advantage:
$(document).on('click', '.more a', function () {...});
This is a good idea anyway because the :contains pseudo-selector is quite slow. a:contains(Read More...) has to iterate through every link on the page and get it's text to check against.
Your selector is null
http://jsfiddle.net/qRWa5/21/
Related
How can I call a click event listener on a dynamically created element rendered in the DOM?
I have some scripts that dynamically create elements in the DOM, one of them being a button/a. I would like that button/a to do something once the user clicks it. Right now nothing happens but if I add a setTimeout on the things to happen upon a click, then it kind of works - only let's me do the something on the first element's click (button/a). However I can't rely on a setTimeout to make this chunk of code work.
Here is more or less what I have without the setTimeout method:
// This triggers the whole process
var mainBtn = document.querySelector('.mainBtn');
mainBtn.addEventListener('click', function(e){
e.preventDefault();
mainFunc();
});
// This creates and renders dynamic content in DOM
function mainFunc(){
var out = document.querySelector('.outputWrapper');
var mainArr = ['something ', 'another ', 'else ', 'last one.'];
var div = document.createElement("div");
var btn = document.createElement("a");
var btnText = document.createTextNode("Click Me");
btn.appendChild(btnText);
btn.className = "clickMeBtn";
for(a of probArr){
div.append(a);
div.append(btn);
}
out.append(div);
}
// This is what should happen on button/a click
var clickedBtn = document.querySelector('.clickMeBtn');
if( clickedBtn != null ){
clickedBtn.addEventListener('click', function(e){
e.preventDefault();
console.log('click');
});
}
Here's with the setTimeout method:
// This triggers the whole process
var mainBtn = document.querySelector('.mainBtn');
mainBtn.addEventListener('click', function(e){
e.preventDefault();
mainFunc();
});
// This creates and renders dynamic content in DOM
function mainFunc(){
var out = document.querySelector('.outputWrapper');
var mainArr = ['something ', 'another ', 'else ', 'last one.'];
var div = document.createElement("div");
var btn = document.createElement("a");
var btnText = document.createTextNode("Click Me");
btn.appendChild(btnText);
btn.className = "clickMeBtn";
for(a of probArr){
div.append(a);
div.append(btn);
}
out.append(div);
}
// This is what should happen on button/a click
setTimeout(function(){
var clickedBtn = document.querySelector('.clickMeBtn');
if( clickedBtn != null ){
clickedBtn.addEventListener('click', function(e){
e.preventDefault();
console.log('click');
});
}
}, 10000);
Again this kind of works...it let's me click only on the first instance of the clickedBtn variable.
Any suggestions on how to make this idea work?
Thanks a lot!!
document.querySelector('.clickMeBtn'); returns the first found element, or null.
Attach click event handler when you create the anchor element:
var btn = document.createElement("a");
btn.addEventListener('click', function(e){
e.preventDefault();
console.log('click');
});
I am not 100% sure of what is your question. But the problem I can see is that you cannot bind listeners to elements that are not yet created in the DOM.
So I can see 3 options here:
1- You build a wrapper on top of document.createElement() and a wrapper on top of addEventListener to bind the events to the elements after they are created. For example you build a map of event listeners to begin with, with the 'element selector' as Key and function to call as Value. Then you do a lookup of the listener once the element has been created and you bind it to it with addEventListener.
2- You use JQuery on() method like this:
// define the click handler for all buttons
$( document ).on( "click", "button", function() {
alert( "Button Clicked!" )
});
/* ... some time later ... */
// dynamically add another button to the page
$( "html" ).append( "<button>Click Alert!</button>" );
Source: this JQuery script is from [here][1]
(EDIT) 3- you just bind it after creation, as suggested. Although I thought you wanted to do more advanced stuff, like dynamically add elements asynchronously from the listeners.
I'm currently loading my page data dynamically clicking on an element like this:
<a onclick="load('url_of_data')">Some Text</a>
But for a better UX I now want to have an element like this:
Some Text&
and then just use preventDefault like this;
$("a").click(function(e){
var self = $(this);
var href = self.attr('href');
e.preventDefault();
load(href);
});
I got this code from this question.
But it does not work, the site is still reloading and not running the function.
I now apply the click handler everytime the dynamic content was loaded and it works fine.
You need to add return false at the end of your function
$("a").click(function(e){
var self = $(this);
var href = self.attr('href');
e.preventDefault();
load(href);
return false;
});
You will need to specify the container div to which the content will be loaded into.
$("a").click(function(e){
var self = $(this);
var href = self.attr('href');
e.preventDefault();
//Replace "self" with the container you want to load the content into, e.g. $("#myDiv").load(href);
self.load(href);
});
I Think this will make the work.
$('a').click((e) => {
e.preventDefault();
const href = $(e.currentTarget).attr('href');
window.location.href = href;
});
I just needed to reapply the click handler everytime the dynamic content was loaded.
Now it's working fine
$("a").click(function(e){
var self = $(this);
var href = self.attr('href');
window.location.assign(href);
});
It helps you
I have a small script of javascript which iterates over a set of checkboxes which grabs the name attribute and value and then convert it to json. Then I use that value to set the href of an element and then try to trigger a click.
For some reason everything seems to function properly except for the click. I successfully change the href, I console.log() a value before the .click() and after. Everything hits except for the click. The url in the href is value as I clicked it manually.
I have my script included just before the closing body tag and have it wrapped in $(document).ready(). and I do not have duplicate ID's (I viewed the rendered source to check)
Can anyone offer some insight on this?
Here is the javascript
$(document).ready(function() {
$("#multiExport" ).on('click', function(e){
e.preventDefault();
var i = 0;
var list = new Array();
$('.appSelect:checked').each(function(){
var name = $(this).attr('name');
var id = $(this).val();
list[i] = new Array(name, id);
i++;
});
var serList = JSON.stringify(list);
console.log(serList);
var webRoot = $("#webRoot").text();
$("#exportLink").attr('href', webRoot+"/admin/admin_export_multiExport.php?emailList="+serList); //hits
console.log('1'); //hits
$("#exportLink").click(); //this line never executes
console.log('2'); //hits
});
});
$(selector).click() won't actually follow the link the way clicking on it with your mouse will. If that's what you want, you should unwrap the jquery object from the element.
$(selector)[0].click();
Otherwise, all you're doing is triggering event handlers that may or may not exist.
I may guess you need
$(document).on('click', '#multiExport', function(e){
(you can replace document by a nearest element, if you got one).
if you need dynamic click event binding.
EDIT
I would try something like that :
$(document).ready(function() {
$("#exportLink").click(function() {
window.location = $(this).attr('href');
});
$("#multiExport" ).on('click', function(e){
//whatever you want
$('#exportLink').attr('href', 'something').trigger('click');
});
});
$("#exportLink").click(); // this would launch the event.
I must admit I am very surprised that the .click() does not work.
If the idea is to load the page, then the alternative is
$(function() {
$("#multiExport" ).on('click', function(e){
e.preventDefault();
var list = [];
$('.appSelect:checked').each(function(){
var name = $(this).attr('name');
var val = $(this).val();
list.push([name, val]);
});
var serList = JSON.stringify(list);
var webRoot = $("#webRoot").text();
location=webRoot+"/admin/admin_export_multiExport.php?emailList="+serList;
});
});
I am devloping a website in which I have created an option to upload multiple images using plupload script. Which allows us to trigger a popup when we click on an image to upload mulitple images.
This script requires a JS file to be added which has a function started with the code as below:
$(document).ready(function(){
var baseurl = $('#baseurl').val();
var i = 0;
$('.uploadFiles_one').click(function(){
$('#uploadBox_one').dialog('open');
return false
})
....
..some more js code..
....
})
Now I have modified this JS file so that I would be able to use the same JS file for multiple DOM element in which I have generated via PHP loop, the new script with the code as below:
$( document ).on( "click", ".uploadFiles_loop", function(){
var baseurl = $('#baseurl').val();
var i = 0;
var my_id = $(this).attr('id');
var cnt = my_id.replace("anchor_", "");
$('.uploadFiles_loop').click(function(){
$('#uploadBox_'+cnt).dialog('open');
return false;
});
....
..some more js code..
....
})
The front end would have one Image when any user click on the image it will open a popup. But now when I have modified the script I have to click twice on the image to get the popup. But after that all the rest Image uploader icons got open in single click.
So my question is why I have to click any "Upload Image" twice first time( I mean when the page has been loaded).
Try to remove this extra click handler $('.uploadFiles_loop').click(function(){...});
Leaving just:
$( document ).on( "click", ".uploadFiles_loop", function(){
var baseurl = $('#baseurl').val();
var i = 0;
var my_id = $(this).attr('id');
var cnt = my_id.replace("anchor_", "");
$('#uploadBox_'+cnt).dialog('open');
// Recheck were you want this return false;
return false;
....
..some more js code..
....
})
On your code you had a listener that on click run a function that added a click listener. So only by second click it would run the code $('#uploadBox_'+cnt).dialog('open'); return false;. If you remove that it will run on first click.
P.s. - On your code you have a return false;, if you have more code after it will not work. So I commented it, you might want it after the rest of you code you have.
$(document).ready(function(){
$( document ).on( "click", ".uploadFiles_loop", function(){
var baseurl = $('#baseurl').val();
var i = 0;
var my_id = $(this).attr('id');
var cnt = my_id.replace("anchor_", "");
$('#uploadBox_'+cnt).dialog('open');
return false;
});
....
..some more js code..
....
});
Very very unclear what you are trying to actually accomplish, however, you need to put the action you want to happen when you click, DIRECTLY IN the on function. Don't wrap it in another click function
I know .live was depreciated and recently I was updating a page and realized I was using .live I would like to switch to .on but do not understand what to change. Here is my current code:
//Script for Choosing which form to display
$("#email-button, #text-button").live('click',
function(){
//figure out what button was clicked.
if(this.id === "email-button"){
var btnA = $(this);
var btnB = $("#text-button");
var divA = $('#email-form');
var divB = $('#text-form');
}
else{
btnA = $(this);
btnB = $("#email-button");
divA = $('#text-form');
divB = $('#email-form');
}
//make sure it is not already active, no use to show/hide when it is already set
if(btnA.hasClass('dark_button_span')){
return;
}
//see if div is visible, if so hide, than show first div
if(divB.is(":visible")){
divB.fadeOut("slow", function(){
divA.fadeIn("slow");
});
}
else{//if already hidden, just show the first div
divA.fadeIn("slow");
}
//Add and remove classes to the buttons to switch state
btnA.addClass('dark_button_span').removeClass('light_button_span');
btnB.removeClass('dark_button_span').addClass('light_button_span');
}
);
I had assistance writing the above script and do not know what to change. Simply changing .live to .on doesn't work.
Any help would be greatly appreciated!
Thanks!
The syntax for on is
$("containerElement").on("click", "targetElement(s)", function(){ });
So in your case it could be
$("body").on("click", "#email-button, #text-button", function(){ });
But being more specific than body is a good idea.
$(document).on('click', '#email-button, #text-button', function() {
// Your code
});
Should do the trick. See http://api.jquery.com/live/ and http://api.jquery.com/on/.
However, since you're using IDs, you probably don't even need .live() or delegating .on(). So the way I'd write that would be simply:
function doButtons(btnA, btnB, divA, divB) {
btnA = $(btnA); btnB = $(btnB); divA = $(divA); divB = $(divB);
// Make sure it is not already active, no use to show/hide when it is already set
if (btnA.hasClass('dark_button_span'))
return;
// See if div is visible, if so hide, then show first div.
if (divB.is(":visible")) {
divB.fadeOut("slow", function (){
divA.fadeIn("slow");
});
}
else // If already hidden, just show the first div.
divA.fadeIn("slow");
// Add and remove classes to the buttons to switch state.
btnA.addClass('dark_button_span').removeClass('light_button_span');
btnB.removeClass('dark_button_span').addClass('light_button_span');
}
$('#email-button').click(function () {
doButtons(this, '#text-button', '#email-form', '#text-form');
});
$('#text-button').click(function () {
doButtons(this, '#email-button', '#text-form', '#email-form');
});
jQuery's .on doesn't use event delegation unless you provide it a selector. In the above code, .live listens for events at the document, but that's far too much bubbling. If we were to implement it with .on though we would do the following:
var handler = function( e ) {
console.log( "Clicked" );
};
$( document ).on( "click", "#email-button, #text-button", handler );
Again though, it isn't really all that wise to listen for events on the document; ideally you would pick an element just above your selector. So if #email-button and #text-button have a common parent, you should use that in place of document.