I have an IFRAME and I want to trigger an event (which is inside the iframe) from the parent of an IFRAME:
Just a rough example of what I am trying to do :
<iframe id="i">
<div id="test"></div>
<script>
$(document).ready(function() { // Event is binded inside the iframe
$("#test").live({ click : function() { alert("hello"); } });
});
</script>
</iframe>
<script>
$(document).ready(function() { // Want to trigger it from outside the iframe
$("#i").contents().find("#test").trigger("click");
});
</script>
Your jquery is correct only problem is that that you are doing this when document is ready but at that time iframe is not getting fully loaded therefore div doesn't exist at that time and not triggers click.
Change your main page script to
$(document).ready(function() {
//want to trigger it from outside the iframe
$("#i").load(function(){
$("#i").contents().find("div").trigger("click");
});
});
try this
ger javascript event from within an iFrame
but look at answer from Gilly
document.myFrameName.myFunction();
regards
Related
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();
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
});
});
I am refreshing my page every 25 seconds using Javascript.But another Javascript for click function works fine before page refresh whereas after page refresh it doesnot work.
HTML:
<div id="refreshOnline">
<div id="refreshData">
//Set of Functions
<a target="_blank" href="http://example.com/startgame.php?gname='.$key['gameName'].'&player='.$_SESSION["uname"].'&type=t20" class="btn btn-primary btn-sm popup-game" id="popup-game" >Play Now!</a>
</div>
</div>
Javascript:
<script type="text/javascript">
//Script to refresh Div
function show_data()
{
$('#refreshOnline').load('main.php #refreshData');
}
setInterval('show_data()', 25000);
//Script to oprn link in new window
$('#popup-game').click(function (event) {
event.preventDefault();
alert("Working");
window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes");
});
</script>
Before refresh, link opens in new window whereas after execution of refresh script, link opens in new tab instead of new window.
The code:
$('#popup-game').click(...
binds a click handler to the #popup-game element that exists at the moment that code runs. If that element is a child of #refreshOnline it will be replaced when you refresh #refreshOnline and so the new version of that element will not have a click bound. You can use a delegated event handler instead:
$('#refreshOnline').on('click', '#popup-game', function(event) {
event.preventDefault();
alert("Working");
window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes");
});
This actually binds the handler to #refreshOnline, but when a click occurs jQuery automatically checks if it was on a child element that matches the selector in the second parameter and only calls your function if it does.
For more information see the .on() doco.
This is because the click handler is not assigned to the new content. Set them again after you have changed the content like so:
<script type="text/javascript">
//Script to refresh Div
function show_data()
{
$('#refreshOnline').load('main.php #refreshData');
setClickers();
}
function setClickers(){
//Script to oprn link in new window
$('#popup-game').click(function (event) {
event.preventDefault();
alert("Working");
window.open($(this).attr("href"), "popupWindow","width=600,height=600,scrollbars=yes");
});
}
$(function(){
setClickers();
setInterval('show_data()', 25000);
});
</script>
You should register the click event every time you refresh the content of the div.
How can I load a div after a page has been loaded and created by a script.
$(document).ready(function(){
$('body').append('<div class="div_new" alt="hi">Hello World</div>');
});
$('.button').click(function(){
alt_value = $('.div_new').attr('alt');
alert(alt_value);
});
I'm trying to load a div created by a script.
Your click handler needs to go inside the DOM ready handler. Without doing this, you will be trying to attach the click() to an element which doesn't yet exist. Try this:
$(document).ready(function(){
$('body').append('<div class="div_new" alt="hi">Hello World</div>');
$('.button').click(function(){
alt_value = $('.div_new').attr('alt');
alert(alt_value);
});
});
I am trying to change the background image of a link when it get clicked. I keep getting the error that you cannot call 'click' on null.
JQuery (in the header)
<script type="text/javascript">
$('a.upvote-arrow').click(function(){
$('#tempid1').css('background-image','url(../images/icons/up-arrow2.png)');
});
</script>
HTML
<div class="top-comment-vote">
</div>
Thanks
Try adding $(document).ready:
<script type="text/javascript">
$(document).ready(function(){
$('a.upvote-arrow').click(function(){
$(this).css('background-image','url(../images/icons/up-arrow2.png)');
});
})
</script>
Are you sure this script is being loaded after the html is in the DOM?
Try wrapping what you wrote in a onload closure.
$(function() {
$('a.upvote-arrow').click(function(){
$('#tempid1').css('background-image','url(../images/icons/up-arrow2.png)');
});
});
Another thing you can do is take advantage of delegation for the event registration.
$('body').on("click", ".a.upvote-arrow", function(){
$('#tempid1').css('background-image','url(../images/icons/up-arrow2.png)');
});
This binds it to the body instead.
Try wrapping your script with document.ready; I suspect that you're script might be running before your entire page loads.