CODEWITHSUNDEEP
javascriptjqueryhtml
David19801
David19801

Reputation: 11448

onclick alert jquery html javascript

I have a page so far with:

<div id="x1">Text paragraph 1<link here></div>
<div id="x2">Text paragraph 2<link here></div>
<div id="x3">Text paragraph 3<link here></div>

Where link here is like

<a href="google.com">google</a>

What I am trying to do is add a link to the bottom of each paragraph of text so that when it is clicked it displays an alert with the div id of that text block.

So for example, if someone clicks on the link at the bottom of text paragraph 2, then they will get an alert saying "x2".

So far, I have only been able to think of a way involving an onclick event for each link in each div. But with 100 paragraphs this could become quite a lot and is messy code.

like

$('#x1').onclick(function(){
alert('x1');
});

How can I do this better?

The page is generated with php so I could put the div id's anywhere in that text block area (even make a new div around the link if required)...

EDIT - Many good answers, I don't know which to pick as best. I actually ended up using Loongawas for my purpose as its easy to make for my beginner level in php.

<div id='a1'>This text <a href="" onclick=tomato(1)>test</a>
</div>
<div id='a2'>This text <a href="" onclick=tomato(2)>test</a>
</div>
<div id='a3'>This text <a href="" onclick=tomato(3)>test</a>
</div>

and

function tomato(test){
alert(test);
};

Some of the others are incredibly interesting as they use higher functions. I'm going to spend the rest of the day looking into them. Thanks to all.

Upvotes: 1

Views: 14608

Answers (9)

danniel
danniel

Reputation: 1751

$(document).ready(function() {
        var links = $("div[id^='x'] a"); //get the a tags
        $.each(links, function(i,v) {
            $(v).click(function() { //bind on click
                alert(v.parentNode.id); //alert div id
                return false; // stop
            });
        });
    });

Upvotes: 0

user578895
user578895

Reputation:

use jQuery's live or delegate functions:

$('div a').live('click', function(ev){
    alert($(this).closest('div').attr('id'));
});

The benefit to the live/delegate functions is that there's actually only a single event on the entire page for this (as opposed to one event per link). If you add more links dynamically, this still works without having to attach more events.

The difference between live and delegate is that delegate is specific to a part of the page. If, for instance, you wrapped all of these DIVs in another div, the call would look like:

$('#wrapperDiv').delegate('a', 'click', function(ev){ ...

The advantage to this is that the internal jQuery code that checks to see if the click matches the selector only runs on clicks inside of #wrapperDiv instead of clicks anywhere on the page.

Upvotes: 1

Michael McTiernan
Michael McTiernan

Reputation: 5313

A better approach to this is to make all of the clickable areas share something in common that you can use as a selector. For example, if all of the clickable divs had class='click', you'd be able to select them all using $('.click') and bind to that.

$('.click a').bind('click', function() {
    var div = this.closest('.click');
    alert(div.attr('id'));
    return false;
});

Upvotes: 0

gen_Eric
gen_Eric

Reputation: 227270

Add a class to each div, so you can select all of 'em at once.

<div id="x1" class="x">Text paragraph 1 <a>Click</a></div>
<div id="x2" class="x">Text paragraph 2 <a>Click</a></div>
<div id="x3" class="x">Text paragraph 3 <a>Click</a></div>

Then you can do:

$('div.x a').live('click', function(e){
  e.preventDefault();
  alert($(this).closest('div.x').attr('id'));
});

http://jsfiddle.net/VGh3X/1/

Upvotes: 0

Jesse Aldridge
Jesse Aldridge

Reputation: 8149

Something along these lines should work:

<div id="x1">Text paragraph 1 <a href='google.com'>google.com</a></div>
<div id="x2">Text paragraph 2 <a href='google.com'>google.com</a></div>
<div id="x3">Text paragraph 3 <a href='google.com'>google.com</a></div>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js'></script>
<script>
  $('a').click(function() {
    alert($(this).parent().attr('id'))
    return false
  })
</script>

Upvotes: 0

Loogawa
Loogawa

Reputation: 389

You could make a javascript function that takes a variable and then pass the paragraph number to the function. If the paragraph was number two you could call 

myfunction(2);

or is the number not the problem?

Upvotes: 0

paztulio
paztulio

Reputation: 351

$('.myDivs').click(function(){
  alert($(this).parent().attr("id"));
});

Or select the divs in some other way:

$('#x1').parent().children('div').click(...);

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76557

Have you considered using a class to name them all as opposed to explicit ids?

<div class="x">Text paragraph 1<link here></div>
<div class="x">Text paragraph 2<link here></div>
<div class="x">Text paragraph 3<link here></div>

so then you would be able to use a single click event for all of them?

$(".x a").click()
{
   //Use $(this) to refer to the clicked item.  
   alert($(this).parents().attr("id"));       
});

Upvotes: 0

mattsven
mattsven

Reputation: 23283

$('#x1, #x2, #x3').click(function(){
    alert($(this).parents().attr("id"));
});

EDIT:

Better version:

HTML:
<div class="x">Text paragraph 1<link here></div>
<div class="x">Text paragraph 2<link here></div>
<div class="x">Text paragraph 3<link here></div>

$('.x a').click(function(){
    alert($(this).parents().attr("id"));
});

Upvotes: 0

Related Questions