Linking html element to jQuery.click() using attribute "title" - javascript

I have a html code:
<a title="intro">INTRO?</a>
I need to link a jQuery click event on the tag. Using the solution given here I wrote the following javascript:
jQuery("a[title='intro']").click(alert("abc"));
However the page is alerting ("abc") on page load rather than on clicking the tag. Also to inform that the above code is NOT inside the load function jQuery(function() {... } and is a separate function.
Any solutions pls?

You are invoking the alert function during the event registration and is passing the value returned by the alert as the click callback handler.
Instead you need to pass a function reference as the click callback and within the function you can add the alert call
jQuery("a[title='intro']").click(function(){
alert("a")
});

Related

Strange behavior of jQuery code in the href attribute

I saw that it's possible place jquery code in the href attribute of the html a tag.
That code, however, works so I do not understand: it works after the second click.
Why?
JS
<br>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<a id="myId" href='javascript:
$(document).ready(function(){
$("#myId").click(function() {
alert("ok jQuery");
});
});'>jQ</a>
In the first click, the function in href attribute gets executed and the handler gets bound to the 'myId' anchor element. In the second click handler gets executed and it shows alert.
Nothing strange in this behavior.
There are no jQuery click handlers bound to your link at the beginning.
However, when you click it at the first time, it executes the following script from its href:
$(document).ready(function() {
$("#myId").click(function() {
alert("ok jQuery");
});
});
and binds a handler to your link.
So, after the first click you have no alert, but you now have a click handler bound to your #myId.
When you click it at the second time, it fires fresh-bound jQuery event, which shows the alert.
Also, it executes href again, so when you click this link again, you will get two (the same) click handlers and two alerts, and number of alerts will be incremented each time.
The first click defines the click event to show the alert box.
The second click executes the code and show the alert box.
As the comment, you shouldn't include this code into the href attribute since that's a bad practice.

on.('click) for dynamically created element is getting called on execution time without click

I am creating a simple quiz kind of page. So I created grid with element.
Here is the div which has the grid cloned.
Var template = $(".answer-layout-").clone();
And the listener for the element in loop is
$("a", template ).click(this.Answer_PickOne_OnClick(item));
The function implementation is,
this.Answer_PickOne_OnClick = function (sender, e) {}
I expect the click action to get trigger when i click the clement. But it is getting triggered on execution of the code.
Tried many ways by passing argument and so but fails. Any suggestion please
This is because code this.Answer_PickOne_OnClick(item) actually executes your function. If you want to hook it as event handler instead, you should wrap in in a function:
$("a", template ).click(function() {
this.Answer_PickOne_OnClick(item);
});

JQuery event handler executing on page load

I have some html on my page, and in my head I have $("#someelement").click(alert("click"));. Whether #someelement exists or not, when I load the page for some reason the alert goes off. However, it doesn't execute when I have $("#someelement").click(function(){alert("click")});. Why is that?
alert("foo") will always alert foo immediately, it does not return a function that you can pass as an event handler. You need to pass a function into the jQuery event binding method instead.
$("#someelement").click(function(){
alert("click");
});
Additionally, if this code is in the <head></head>, it needs to be wrapped in $(document).ready().
$(document).ready(function(){
$("#someelement").click(function(){
alert("click");
});
});
alert is a method defined on the window object, such as, window.alert. It expects one parameter that is a string, and it must be a member of the window object. placing ("string") after alert, such as alert("string") will execute that function, resulting in the popup window with "string". The same thing happens when you place alert("string") as a parameter to a function, a popup window happens when said code runs.
Try this:
$(document).ready(function() {
$("#someelement").click(function(){alert("click")});
});
Here is a working Fiddle

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.

jquery click listener on remote javascript file

I have a simple link:
Test Link
I want to get an alert whenever this link is pressed, so I add:
<script>
$('#test').click(function() { alert('clicked!'); } );
</script>
and it works fine, but when i move this code to a remote javascript file, it doesn't work..
any idea why?
I've also tried this code:
$(document).ready(function() {
$('#test').click(function() { alert('clicked!'); });
});
Your second example, using the ready function, should be working. Your first example should also work provided you include the script below the element with the ID "test" (the element has to already exist when your script runs, since you're not waiting for DOM ready). In both cases, your script must be included below (after) the jQuery script.
Example when you don't use ready
Example when you do use ready
I'd check that your external file is actually getting loaded (look for 404 errors in the browser console).
Update: From your comment below, the problem is that the "test" element doesn't exist when you're trying to hook up the handler. click only sets up the handler on the element if it already exists. If you're creating the element later, you have three options (two of which are really the same):
Use the code you already have, but run it after you've created the element (e.g., in the success callback of the ajax call you're making).
Use live, which basically hooks the click event document-wide and then checks to see if the element you tell it ("#test", in this case) was clicked.
Use delegate on the appropriate container (the element within which you're adding "test"). delegate is a more targeted version of live.
live and delegate are both examples of a technique called event delegation, which jQuery makes easy for you by providing those methods.
See the links for further information and examples, but for example, suppose you're going to be adding the "test" element to an element with the ID "target". You'd use delegate like this:
$("#target").delegate("#test", "click", function() {
alert("Clicked");
});
That hooks the click event on "target", but acts a lot like you've just magically hooked it on "test" as soon as "test" was added. Within your handler, this refers to the "test" element just as with click.

Categories

Resources