Javascript adding e.preventDefault(); to script

Question

As always many thanks for the help in advance!

I have a set of scripts running on a page and have been having issues with them defaulting each other. I have managed to fix most of them with e.preventDefault(); but just cant work out with this one how to structure it. It may be monday morning moronity on my part to be honest lol That and being very green with java script.

$(document.body).on('change', 'select#category-navbar', function() {
$('.selected-value').text($(this).val());
});

But ye any help would be super appreciated as I just need to add e.preventDefault(); to this script and it should all be dandy.

EDIT

This is the script that the above one appears to be defaulting:

$(document).ready(function() {

    $('.verdana').click(function(e) {
    $('#changeMe').css('font-family','verdana');
    e.preventDefault();  
});

    $('.arial').click(function(e) {
    $('#changeMe').css('font-family','arial');
    e.preventDefault();  
});

    $('.tahoma').click(function(e) {
    $('#changeMe').css('font-family','tahoma');
    e.preventDefault();  
});

    $('.times').click(function(e) {
    $('#changeMe').css('font-family','times');
    e.preventDefault();  
});

    $('.copperplatebold').click(function(e) {
    $('#changeMe').css('font-family','copperplatebold');
    e.preventDefault();  
});

    $('swiss721').click(function(e) {
    $('#changeMe').css('font-family','swiss721');
    e.preventDefault();  
});

    $('.baskerville').click(function(e) {
    $('#changeMe').css('font-family','baskerville');
    e.preventDefault();  
});

    $('.oldenglish').click(function(e) {
    $('#changeMe').css('font-family','oldenglish');
    e.preventDefault();  
});


    $('.timesnewroman').click(function(e) {
    $('#changeMe').css('font-family','timesnewroman');
    e.preventDefault();  
});

    $('.castellar').click(function(e) {
    $('#changeMe').css('font-family','castellar');
    e.preventDefault();  
});

    $('.calibri').click(function(e) {
    $('#changeMe').css('font-family','calibri');
    e.preventDefault();  
});

    $('.scriptmtbold').click(function(e) {
    $('#changeMe').css('font-family','scriptmtbold');
    e.preventDefault();  
});
 $('.lucidacal').click(function(e) {

    e.preventDefault();  
});

// select font in dropdown list to change font-family of #changeMe
$('select').change(function() {
    if($(this).val() == "Default font"){
        $('#changeMe').css('font-family',"");
    }else{
        $('#changeMe').css('font-family',$(this).val());
    }

});

e.preventDefault(); });

Sorry if I haven't been clear. I need to add the e.preventDefault(); function to this script to stop it defaulting other options on my page. I am unsure how to structure it to get it to work. Thanks for your response Cristy :-) — MattLuka
– MattLuka, Commented Nov 3, 2014 at 11:45

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You should read more on docs

.change( [eventData ], handler )

handler: Type: Function( Event eventObject )

$(document.body).on('change', 'select#category-navbar', function(e) { // add event
    e.preventDefault(); // add prevent default
    $('.selected-value').text($(this).val());
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Nov 3, 2014 at 11:46

Mihai Iorga

39.8k17 gold badges109 silver badges109 bronze badges

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

3 Comments

MattLuka Over a year ago

Many thanks for this. And the reading is especially helpful to. this hasn't stopped the unwanted behaviour unfortunately. I may be barking up the wrong tree possibly

Mihai Iorga Over a year ago

Maybe you could replicate your problem in a fiddle and you will have a greater chance in debugging. What you don't want to be executed ?

MattLuka Over a year ago

Just realised that I cant do a jsfiddle as the script that is being re set by the script above is one to load locally stored fonts. I Will add the script it appears to be defaulting to the question to see if that helps you guys.

andrey.shedko · Accepted Answer · 2014-11-03 11:45:46Z

1

Do you mean this?

$(document.body).on('change', 'select#category-navbar', function(e) {
   $('.selected-value').text($(this).val());
   e.preventDefault();
});

answered Nov 3, 2014 at 11:45

andrey.shedko

3,23811 gold badges71 silver badges126 bronze badges

3 Comments

MattLuka Over a year ago

Unfortunately this didn't work. Maybe this is not what the problem is although I cant think of anything else..

andrey.shedko Over a year ago

What about e.stopPropagation()?

MattLuka Over a year ago

still no joy with e.stopPropagation() :-( I have to say I am most confused about whats going on. Adding the e.preventDefault(); to all the other scripts stopped this behaviour but I just cant crack this one.

OGPoyraz · Accepted Answer · 2014-11-03 11:48:04Z

0

You should add an event object inside your function.

$(document.body).on('change', 'select#category-navbar', function(event) {
   $('.selected-value').text($(this).val());
   event.preventDefault();
});

answered Nov 3, 2014 at 11:48

OGPoyraz

112 bronze badges

1 Comment

MattLuka Over a year ago

Thanks for your help OG! This unfortunately hasn't worked so am wondering if I have issues elsewhere so I will have to check back over things. Although it is only the script that is resetting another to default.

nathan-m · Accepted Answer · 2014-11-03 12:49:29Z

0

e.preventDefault() stops the browser from performing the default action, but lets the event propagate to all event handlers

If you want to stop other event handlers running, you can call e.stopPropagation() or e.stopImmediatePropagation() depending on the situation.

This is a little hap-hazard though, as it will depend on which elements you bound the event listener to, and in which order they were bound.

answered Nov 3, 2014 at 12:49

nathan-m

8,8652 gold badges21 silver badges29 bronze badges

2 Comments

MattLuka Over a year ago

Ah ok that's interesting, many thanks Nathan. I will try placing them in and see what results I get.

MattLuka Over a year ago

Still no joy with either of these :-( I keep pouring over the code but no clues as yet!

Collectives™ on Stack Overflow

Javascript adding e.preventDefault(); to script

4 Answers 4

3 Comments

3 Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related