passing element by id works with pure javascript but fails with jQuery

Question

i have this pretty simple piece of code where i get a certain id and what im trying to do is to change the element's css. the code looks like this:

<script>
 jQuery('.sitePick').click(function(event){
   var site = (event.target.href.split("#")[1]); // get the id
   console.log(site); // make sure i get the correct id
   jQuery('#' + site).css("display" , "block"); //change css
});
</script>

the log prints the correct id of the element, and when i tried t use the same id like this : docuemnt.getElementById(site).style.display = "block" it worked, but not when using jQuery. what worries me the most its that even when i passed the id as is ( jQuery("#dummySite") to jQuery it still didn't work..any idea what i'm doing wrong? thx

UPDATE

the value of site is "site_buzzy.com". I am loading jquery right at the beginning of the file, other jquery methods work.the script being loaded after the content.

What's the value of site, coz generally integers or values starting with integers are known to cause problems. Also, 1. are you loading jQuery, 2. loading the script after loading jQuery, and thirdly, 3. loading the script after the content has been loaded? — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jan 6, 2016 at 12:55
are you sure that the DOM is loaded when jQuery('.sitePick').click(...) is called ? to do so wrap your code with $(function(){ }); — Hacketo
– Hacketo, Commented Jan 6, 2016 at 12:59
@Pamblam It wasn't Jai than suggested diff between event.target and this :) I was just making a side note btw, i din't downvoted your answer even Jai was correct, it didn't really make sense — A. Wolff
– A. Wolff, Commented Jan 6, 2016 at 13:09
@Pamblam the css call is not on element.target , jQuery('#' + site) is not this — Hacketo
– Hacketo, Commented Jan 6, 2016 at 13:24

A. Wolff · Accepted Answer · 2016-01-06 13:28:15Z

2

You need to escape dot(s) in some way to use site string as jQuery selector.

var site = (event.target.href.split("#")[1]).replace(/\./g, "\\.");

Now this could be simplified to:

var site = event.target.hash.replace(/\./, "\\."); // get the id
jQuery(site).show();

jQuery('.sitePick').click(function(event) {
  var site = event.target.hash.replace(/\./, "\\."); // get the id
  jQuery(site).show(); //change css
});

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class="sitePick" href="#site_buzzy.com">Site Pick</a>
<br />
<div id="site_buzzy.com" class="hidden">The DIV #site_buzzy.com</div>

edited Jan 6, 2016 at 13:28

answered Jan 6, 2016 at 13:20

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A. Wolff Over a year ago

@Ianis No, you want as IDstring: #site_buzzy\.com

Collectives™ on Stack Overflow

passing element by id works with pure javascript but fails with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related