jQuery Click Event Triggering without Clicking - javascript

I am facing a tricky problem with my code and hope to get some help on this. Below is a snippet of my code:
<SCRIPT type='text/javascript'>
function list(json) {
// list result
$('#pop-up').click(alert(json.length));
}
// declare map and options
google.maps.event.addListener(map, 'idle', function () {
var query = 'some query';
$.getJSON(query, list);
});
</SCRIPT>
<A href='javascript:void(0)' id='pop-up'>Click Me</A>
As seen, the pop-up is supposed to return the length of json object when the pop-up link is clicked. However, I am getting the pop-up without clicking the link. Anyone knows where the problem lies?

It's because you're using .click() rather than .click(function() {}). Replace the $('#pop-up') line with:
$('#pop-up').click(function() { alert(json.length) });
and get rid of the curly brace underneath that line.

Related

Get Element in Div JS

I want to create an onclick function for button that is in div with id Restyled.
I tried this:
<script>
var RestyledDiv = document.querySelector("#Restyled");
var RestyledButton = x.querySelector("button");
RestyledButton.onclick = function() {
alert("button was clicked");
}​;​
</script>
But I get this error: Uncaught SyntaxError: Invalid or unexpected token
You're looking for adding an event listener to the button and you can use the querySelector to go deeper than just a single selector level.
You also had two hidden whitespace characters in your code that resulted in the syntax error you were seeing.
Note the <0x200b> characters that are shown in my editor that is configured to show whitespace characters.
var RestyledButton = document.querySelector("#Restyled button");
RestyledButton.addEventListener('click', function() {
alert("button was clicked");
});
<div id="Restyled">
<button>Click me!</button>
</div>
i tried running your code and basically there are 2 things that i would like to point out:
var RestyledDiv = document.querySelector("#Restyled");
it is not needed here, you are not using the given div.
You can directly select the button by the provided id. You can delete the dive query line whatsoever.
it seems like there was something weird in your last line of code:
}​;​
For some reason, it was not working for me, but as soon as i literally retyped the same code - it worked.
Here's how it works for me:
<script>
var RestyledButton = document.querySelector('#restyledButton');
RestyledButton.onclick = function () {
alert('button was clicked');
};
</script>

Activate hover action on a certain word

Okay, so this is something that has already been done so I know it's possible. What I'd like is that, when the user hovers the mouse on some word defined by the wordHoverAssign() function, something would get activated.
So, in a more concise manner: When the page is loaded the text I love potatoes! shows up on screen, created with HTML. Then the function wordHoverAssign("potatoes") is executed. What should happen then, when I hover the word potatoes, is that an alert message would pop up with, for example, this message You hovered the word!.
Is this possible? How would I go about doing it? I'd really like it if I didn't have to use any more frameworks/plugins. I'm using jQuery by the way.
Thank you.
My code so far (if you don't feel like setting it up):
wordHoverAssign("potatoes");
function wordHoverAssign(theWord) {
//code here
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>I love potatoes!</p>
The following allows you to assign different function to any word inside the #content div. The associated function is called only when the specific word is hovered.
<div id="content">
I love potatoes!<br/>
She loves something else<br/>
The potatoes coming again.
</div>
<script>
window.wordsAssigned = {};
function wordHoverAssign(word,func){
wordsAssigned[word] = func;
}
wordHoverAssign('potatoes',function(){
alert('Patatoes hovered!');
});
wordHoverAssign('something else',function(){
alert('something else!');
});
$(function(){
var content = $('#content');
var html = content.html();
for(var word in wordsAssigned){
html = html.replace(new RegExp(word,"gm"),'<span onmouseover="wordsAssigned[\''+word+'\']()">'+word+'</span>');
}
content.html(html);
})
</script>
As per your need :contains('text') suits you better. see example:
wordHoverAssign("potatoes");
function wordHoverAssign(theWord) {
$( ":contains("+theWord+")" ).hover(function(){
alert("Hover happend");
})
}
Here is Updated DEMO
But above code will alert twice because of hover event also bind with body, so my suggestion is use special tag. See following snippet:
wordHoverAssign("potatoes");
function wordHoverAssign(theWord) {
$( "p:contains("+theWord+")" ).hover(function(){
alert("Hover happend");
})
}
Another DEMO for hover in p tag. It won't work on body hover.

Insert HTML into DIV with Jquery

This is one of my first jquery scripts. I want to expand a DIV and load some external html into it. This is the code I have so far:
http://jsfiddle.net/spadez/uhEgG/5/
This is the code I have:
$(document).ready(function () {
var loadUrl = http://sheldonbrown.com/web_sample1.html
$("#close").click(function () {
$("#country_slide").hide();
});
$("#country").click(function () {
$("#country_slide").show();
$("#country_slide").html(ajax_load).load(loadUrl);
});
});
The expanding did work but now it doesn't since adding the Ajax code. Can anyone show me hwere I am going wrong, and ideally highlight any thing I am doing wrong. Thank you.
Just replace country click with this
$("#country").click(function () {
$("#country_slide").show();
$("#country_slide").load(loadUrl);
});
and add quotes on url
var loadUrl = "http://sheldonbrown.com/web_sample1.html";
Fixed it for you..
var loadUrl = 'http://sheldonbrown.com/web_sample1.html';
http://jsfiddle.net/APkHN/1/
your URL was not a string, and it was missing an end brace.
put your url inside ''
see it working here --> http://jsfiddle.net/uhEgG/8/
Also, you might need to delegate close like this (As you are replacing html inside #country_slide which contains your #close)
$("#country_slide").on('click','#close',function () {
$("#country_slide").hide();
});

Unable to find click event

Here is my JQuery Code:
$(function () {
$('[id*=clickbtn]').click(function () {
var url = "WindowPages/EditorControl.aspx?controlName=" + this.name;
oWnd.setUrl(url);
oWnd.show();
});
});
Now the problem is, i have 4 to 5 buttons whose id contains 'clickbtn' when i click the any one of them for first time it works well. But it does not works for second click, any help why is this happening?
[EDIT]:
I tried putting the JQuery on page and it worked.. But wnt to know why it does not work on when i put the same on .JS file?
Yes, the result of your event handlers depends very much on the content of your event handlers. If you'd like to share with us the rest of the code we might be able to help. For now the answer is: working as intended
jsFiddle
If your clicks only work on the first try, then I can assure you that it is only the missing code which is to blame. Provide the contents of oWnd.setUrl and oWnd.show and we might be able to help.
Your wildcard selector is wrong. It should be
$("[id$=clickbtn]")
Try this:
$('input[ID*="Button"]')
OR
First set class="btn" to all buttons you want to do this action then
$(function() {
$('.btn').click(function() {
var url = "WindowPages/EditorControl.aspx?controlName=" + this.name;
oWnd.setUrl(url);
oWnd.show();
});
});

simulating a click on a <a>-element in javascript

for a website, i am using the jQuery supzersized gallery script: http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
As you can see in the demo, in the bottom right corner there is an little arrow button that toggles a thumbnail bar. There is no option in the config files to automatically blend this in when opening the site.
So i guess i have to simulate a click on that button (the button is the tray-button, see HTML). I tried something like this:
<script>
$(function() {
$('#tray-button').click();
});
</script>
However, this doesnt seem to work in any browsers i tested.
Any idea?
$('#tray-arrow').click(function() {
// prepare an action here, maybe say goodbye.
//
// if #tray-arrow is button or link <a href=...>
// you can allow or disallow going to the link:
// return true; // accept action
// return false; // disallow
});
$('#tray-arrow').trigger('click'); // this is a simulation of click
Try this
$("#tray-arrow").live("click", function () {
// do something
});
I assume that you want to popup the thumbnail bar #thump-tray on page load.
Here's a way to do it:
locate the file supersized.shutter.js and find this code:
// Thumbnail Tray Toggle
$(vars.tray_button).toggle(function(){
$(vars.thumb_tray).stop().animate({bottom : 0, avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-down.png");
return false;
}, function() {
$(vars.thumb_tray).stop().animate({bottom : -$(vars.thumb_tray).height(), avoidTransforms : true}, 300 );
if ($(vars.tray_arrow).attr('src')) $(vars.tray_arrow).attr("src", vars.image_path + "button-tray-up.png");
return false;
});
After it, add:
$(vars.tray_button).click();
Dont forget in your page (demo.html in the plugin), to change
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
to
<script type="text/javascript" src="theme/supersized.shutter.js"></script>
instead of using
$(function(){
//jquery magic magic
});
you culd try this witch will work your jquery magic after the full page is loaded (images etc)
$(window).load(function () {
// jquery magic
});
and to simulate a click you culd use // shuld be the same as $('#tray-arrow').click();
$('#tray-arrow').trigger('click',function(){ })
example:
$(window).load(function () {
$('#tray-arrow').trigger('click',function(){
alert('just been clicked!');
})
});
try
<script>
$(function() {
$('#tray-arrow').click();
});
</script>
Make sure that this code is after your carousel is initialized.
This looks like it's a problem of timing the trigger. The plugin also loads on document load, so maybe when you try to bind the event listener the element is not created yet.
Maybe you need to add the listener in something like the theme._init function
http://buildinternet.com/project/supersized/docs.html#theme-init
or somewhere similar.
A problem might be that your plugin detects whether the click has been initiated by a user (real mouse click), or through code (by using $('#id').click() method). If so, it's natural that you can't get any result from clicking the anchor element through code.
Check the source code of your plugin.

Categories

Resources