How can I covert this inline javascript to jQuery function which is causing conflict?

Question

I am using a jQuery language switcher and below is the working script.

<script type="text/javascript">
    window.lang = new jquery_lang_js();
    $(document).ready(function() {  
        window.lang.run();
    });
</script>

<a href="javascript:window.lang.change('jp');">Switch to Japanese</a>

However, the inline JavaScript is causing conflict with other jQuery scripts in the page.

I've tried to create a function like this below but obviously, this is not correct. By moving the .click function inside the document ready as suggested, it's working now.

<script type="text/javascript">
window.lang = new jquery_lang_js();
$(document).ready(function() {  
    window.lang.run();
});
$(".jp").click(function (e) {
    e.preventDefault();      
    var $this = $(this);        
    var id = $this.attr('href');
    window.lang.change('jp');
});

</script>

<a href="#" class="jp">Switch to Japanese</a>

Besides, I have other classes other than "jp" so this is not even the correct approach but I was trying to get rid of the inline javascript first; which I failed to do anyhow.

Can anyone please help?

/////////////////////Below works now ///////////////////

I guess now my question is, how can I rewrite it so that I do not repeat the code like this?

<script type="text/javascript">
window.lang = new jquery_lang_js();
$().ready(function () {
    window.lang.run();
 $(".jp").click(function (e) {
 e.preventDefault();      
        var $this = $(this);        
    var id = $this.attr('href');
    window.lang.change('jp');


 $(".en").click(function (e) {
 e.preventDefault();      
        var $this = $(this);        
    var id = $this.attr('href');
    window.lang.change('en');


});


});


</script>

<a href="#" class="jp">Switch to Japanese</a>
<a href="#" class="en">Switch to English</a>

. . . more classes

There is a better way than writing it like this, correct?

I recommend to follow the jQuery tutorial: docs.jquery.com/Tutorials:Getting_Started_with_jQuery. It explains how to set up jQuery properly so that this problem does not occur. In particular: "As almost everything we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready. To do this, we register a ready event for the document." — Felix Kling
– Felix Kling, Commented Apr 11, 2013 at 17:19
you can further simplify everything with window.lang.run(); $(".jp, .en").click(function (e) { e.preventDefault(); window.lang.change(this.className); }) — TheBrain
– TheBrain, Commented Apr 11, 2013 at 17:28
@TheBrain: Shouldn't that be $(".jp, .en")? ".jp .en" means "an object with class en inside an object with class jp." — user1618143
– user1618143, Commented Apr 11, 2013 at 17:30
@user1618143 yes. thank you. i pressed the key but seems it didn't register and this box is to small for code. — TheBrain
– TheBrain, Commented Apr 11, 2013 at 17:33

Felix Kling · Accepted Answer · 2013-04-11 17:21:24Z

2

You should move the .click() inside of the .ready(). Right now, that JavaScript is running before the anchor loads, so the $('.jp') isn't finding it.

Also, don't use $this as a variable; this isn't PHP, and you're not using it for anything important anyway.

edited Apr 11, 2013 at 17:21

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

answered Apr 11, 2013 at 17:16

user1618143

1,7481 gold badge13 silver badges27 bronze badges

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

5 Comments

Felix Kling Over a year ago

It's good practice to cache the jQuery in a variable if you are going to use it multiple times (which is not the case here, but still). Using $ as first character of the variable is a pretty common coding style convention to indicate jQuery objects.

Matthew Over a year ago

wow, that was it!!! thanks!!! now, instead of repeating the script for each class "jp", "en" (for English) etc, how would I combine the script?

Felix Kling Over a year ago

@Matthew: You can create a new question or that, but I recommend to try to solve it on your own first.

user1618143 Over a year ago

@Matthew: Well, in that case, you probably would use this. Give the anchor tag an id or something that you can pull the language identifier out of, then user jquery to find it inside of the function.

Matthew Over a year ago

thanks. I will try it on my own first. ^^ I think I might be able to do it on my own. If not, I guess I am coming right back. LOL

Collectives™ on Stack Overflow

How can I covert this inline javascript to jQuery function which is causing conflict?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related