CODEWITHSUNDEEP
javascriptjquery
Bussiere
Bussiere

Reputation: 1154

Onclick event on a div not working

Here is my code :

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script> 
function klikaj() {
var title = $('inlineBlock _2tga _3e2a').attr('title');
document.getElementById('log').innerHTML += " "+ title + "titi" ;
};
$('.fbb').click(function (evt) {
 alert('123');
});
</script>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=132911310473896";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  <!-- Load Facebook SDK for JavaScript -->
<div class="fbb">
  <div id="fb-root"></div>



  <!-- Your like button code -->
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true" ></div>
</div>
<div id="log">initial content</div>

I would like to activate the alert('123') when everything in the fbb div is clicked.

I've tried to add the .click(function (evt) but it's not working

if anyone have any idea

Thanks and regards

Upvotes: 0

Views: 2588

Answers (3)

gavgrif
gavgrif

Reputation: 15499

Three issues - first as already noted - you have no content in the .fbb div so its not easy to see what you are clicking. I have added some text - "click here" to ensure the click location is obvious. Second - the source URL for the jQuery is incorrect - you have HTTP: - it needs HTTPS: and third - you need to wrap your jQuery in a $(document).ready wrapper or move the function to the end of the page so it is available after the rest of the page has rendered.

.fbb{
  cursor:pointer
}
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script> 

function klikaj() {
var title = $('inlineBlock _2tga _3e2a').attr('title');
document.getElementById('log').innerHTML += " "+ title + "titi" ;
};

$(document).ready(function(){
  $('.fbb').click(function (evt) {
   alert('123');
  });
})
</script>

<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9&appId=132911310473896";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
  <!-- Load Facebook SDK for JavaScript -->
<div class="fbb"> fbb div - Click Here
  <div id="fb-root"></div>



  <!-- Your like button code -->
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-size="large" data-show-faces="true" data-share="true" ></div>
</div>
<div id="log">initial content</div>

Upvotes: 1

Alexios Tsiaparas
Alexios Tsiaparas

Reputation: 910

By the time that the event is declared, the div has not been declared yet, so it does not exist. You can either use

$(function(){
   $('.fbb').click(function (evt) {
        alert('123');
    });
});

or just move the the click event after the div with class fbb

Upvotes: 1

ControlAltDel
ControlAltDel

Reputation: 35011

There's no content in the div, so there's no way to click in it. Either add some content, or set its width and height through css/style attribute

Upvotes: 4

Related Questions