CODEWITHSUNDEEP
javascriptfunctionhtmlclick
user1581579
user1581579

Reputation: 341

Make div clickable in a nested div

I have a <div> with an ID - button2div. It is over another <div> which has its background changed using JS.

<div id="button2div" onclick="location.href='#';" style="cursor:pointer;"></div>

I can to add a URL to button2div using JS as a nested function.

addEventHandler(divarea1, 'mouseover', function () {     
    divbanner.style.backgroundImage ='url(URL To banner)';
    buttondiv.style.backgroundImage ='url(URL To Button Background)';
    $("button1div").click(function(){
        window.location = 'http://google.com';
    });
});

This does not work.

Note: the addEventHandler is from JQuery.

How do I make this work? Thanks.

Upvotes: 0

Views: 317

Answers (3)

Reza
Reza

Reputation: 684

Try this example with nested spans http://jsfiddle.net/dG26F/

$('span').click(function(){
   alert($(this).attr('data-content')); 
    return false;
});

<span data-content="Hot Dog">
    Hot
    <span data-content="Dog">Dog</span>
</span>

span{
    padding: 10px;
    margin:5px;
    background-color:#c67605;
    display:inline-block;
}
span span{
    background-color:#3a87ad;
}

Upvotes: 0

Nhu Trinh
Nhu Trinh

Reputation: 13956

missing # but you should not bind event in another event like that

addEventHandler(divarea1, 'mouseover', function () {     
  divbanner.style.backgroundImage ='url(URL To banner)';
  buttondiv.style.backgroundImage ='url(URL To Button Background)';
}); 

$("#button1div").click(function(){
   window.location = 'http://google.com';
});

Upvotes: 0

Rick Hoving
Rick Hoving

Reputation: 3575

Your missing a # (I presume), try this:

$("#button1div").click(function(){
window.location = 'http://google.com';
});

The # is a selector which represents your searching for an element which has the id given in the selector.
I.a. #mydiv searches for an element with the id 'mydiv'

Upvotes: 2

Related Questions