Is it possible to make javascript click on a div when the div exists in the browser?
For example, the script could refresh a webpage until a div shows up (with content), and than if the div is clickable, let javascript click it (or just follow the link, if there is one).
using jquery . use $(window).load(); function which attach all event after body load all content in web page . see below code : here you can read document of load();
working example on fiddle
<div id="yourDivId"></div>
$(window).load(function () {
$(document).on('click',"#yourDivId",function () {
// Some code here
});
});
Yes, it’s possible.
You can add a click event handler function using jQuery as mentioned above.
To fire the click event of that div, do
$("#mydiv").click()
this is the correct one
<div id="mydiv></div>
$(window).load(function () {
$(document).on('click',"#mydiv",function () {
// Some code here
});
});
Related
I'm trying to trigger click event on tag inside the div tag.here is my code
$(document).ready(function () {
$("#span").on('click',function(e){
console.log("clicked in link");
});
});
and here is the html structure (this is a PDF-tron Pdf viewer)
but , it doesn't work. How could I trigger the click event using pure Java script?
Thank you.
The issue is that span is a tag name, not an ID, so instead of $("#span") you should do $("span"), but be careful, there might be other span elements there as well.
"How could I trigger the click event using pure Java script?"
The trick for PDFTron WebViewer is that it reners the document in an iFrame.
So, to access the iframe DOM element, you can do this in the WebViewer constructor, for example:
Webviewer(
{
/// ...
},
document.getElementById('viewer')
).then((instance) => {
instance.iframeWindow.document.querySelector('put_your_selector_here').addEventListener('click', () => {
console.log('clicked');
});
});
Use jQuery.click:
$("span.link").click()
#Spectric has half of the answer really
$("span.link").click()
will click on the span but you incorrectly set the click function
$("#span").on('click',function(e){
the # is for ids not for all elements. So it should be changed to
$("span").on('click',function(e){
or better yet to be more specific like #Spectric said
$("span.link").on('click',function(e){
I have an index page that contains the following events.
<div id="sub_page"></div>
$(document).ready(function () {
$("a.menu_navegacion_abrircaja").on('click', function (ev) {
ev.preventDefault();
var href = “nombrecontrollerEJ/view_ej";
$.post(href, function (data) {
$("#sub_page").html(data);
});
});
});
In it, when you click, load the html contents of subpages in the div sub_page.
In view view view_ej, I bring html code and also, jquery code. The Jquery code of the view that is added to the index div is as follows:
$(document).ready(function () {
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert("hello");
});
});
By clicking on the link that contains the class "menu_navegacion_abrircaja", I get the alert ("hello");
But it turns out that there is a problem, for every time I click on the link, the alert messages are repeated (alert ("hello");). For example, the first time I click on the link that contains the class menu_navegacion_abrircaja, it works fine showing the alert once, but then I click again on the same link it shows me the alert twice, then I do it for the third time, He shows me three times the alert, and so on.
I would like to know how to solve this problem.
Will there be any way to restart the events or handler of the jquery, as are the events click, change, "hidden.bs.modal", etc., in such a way that their repetition of the events is avoided?
I have seen the methods unbind (), bind (), off (), which might be the solution, but if so, how could you apply them?
Maybe you could try something like this in the jQuery code of your subpage:
$(document).ready(function () {
$('#modal_establecer_turnos').off('hidden.bs.modal');
$('#modal_establecer_turnos').on('hidden.bs.modal', function () {
alert(“hello”);
});
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 7 years ago.
Maybe someone can help me with the following problem.
The problem is that i'm trying to add new photo album(with jQuery) and after adding- to show new album i'm reloading DIV with jQuery .load function
$($classid).load('..')
Everything is working fine, except that after reloading function like folder hovering (where bar with buttons appear - delete,etc..on hover) just don't work.
It looks like after DIV reloading jquery is dissabled and it need's to be called out again to run all functions.
I'v tryed to add this code
<script>
$.getScript("/data/sys.js" ); // item hovering functions styling etc..
$.getScript("/data/late.js" ); //for button clicks
</script>
at reload DIV'S Content..
Everything worked fine except that when I try to add new photo album at next album adding it multiply's added folder count.. so when i add one there show's up one, at next click there is two new folders..
I'v tryed alot and I cant figure out how to stop this or do it in diffrent way..
here is late.js file that is responsible for new folder adding..
late.js file
Thanks in advance..
Does adding this code below make any difference, as the page wont load up until everything is ready.
$(document).ready(function(){
});
Try:
function loadSelectors() {
// here paste sys.js code
$('#lfd').live('click', function(e) {//form button
$.post( $("#frm1").attr("action"),//form
$("#frm1 :input").serializeArray(),//form input
function(info){
$("#ui_info_anim_s").html(info);//popup
$("#afolder").css("display","none");
$("#fn_nameid").val('New Folder');
//a lot of animation stuff for popup
$("#ui_info_anim_s").animate({top: '40px'}, 'slow', function() {
$('#load_anim_privf').fadeIn( 500);
$('#load_anim_pubf').fadeIn( 500);
$('#load_anim_privf').fadeOut(1000,function(){});
$('#load_anim_pubf').fadeOut( 500);
$(this).delay(3000).animate({top: '+=40px',opacity:'0','filter':'alpha(opacity=0)'},'slow',function(){
$(this).css({"top": "-42px","margin-top": "-42px", "opacity": "1","filter":"alpha(opacity=0)" });
});});
});
loadUp(1,'.ui_treetype','');// Reloading func
});
$("#frm1").submit( function() {
return false;
});
}
Now you need to call function loadSelectors() two times. First on document load & second where div created
This happens because when you attach event handlers to div's and then replace them you lose all event bindings.
What you need is to attach event handlers through their parent container element which stays on page regardless of reload. I think it may be the one you refer to as $classid in your code.
In this case attach event handlers this way, only once, at your page dom ready event:
$(document).ready(function(){
$($classid).on("hover", "yourSelectorHere", function() {
... your code to handle event
})
$($classid).on("click", "yourSelectorHere", function() {
... your code to handle event
})
...
})
I want to trigger a click event on a div. I use the following code but it is not working.
$('#showbanner').trigger('click');
<div id="showbanner">show banner</div>
What is that I am doing wrong? I actually want to show the banner 2 seconds after page is loaded. Before I could add delay event my click event for this div is not firing.
Here is my code example: http://codepen.io/anon/pen/aOzyxo
The issue is because your trigger('click'); call is the first thing in your script; it's called before the event is attached.
You need to move it to the end of the script so that the event handlers are bound when it is called:
Updated Codepen
enter code here
Try this .
$(function () {
$(document).on("click", "#showbanner", function () {
alert('Hola');
});
$("#showbanner").click();
});
show banner
Try this
JS
$('#showbanner').on("click", function() {
alert("test");
});
$('#showbanner').trigger('click');
HTML
<div id="showbanner">show banner</div>
Try this
$('#showbanner').on("click", function() {
alert("test");
});
$('#showbanner').click();
So i want to execute code when i click on a div.
So I have a function
function froth(){$("#area").load("test.html #enquiry1");}
I want to call this function when I click a div
<div id="t1">Test</div>
So I try and use this code
$('#t1').click(function(){
froth();
});
Nope it doesnt work.
BUT
I go to the HTML document and do this
<div id="t1" onclick="froth()">Test</div>
AND IT works perfectly.
So my question is, what am i doing wrong here? Why would it work when in the html doc and not work when i try and make it clickable with jquery?
The main issue is that you need to bind your click event after the rest of the DOM has loaded
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
You can see a live example here
$(document).on('click', '#t1', function() {
froth();
});