javascript - How to use jQuery onChange with ifelse statement's? - Stack Overflow

admin管理员组

文章数量:1388885

I have a problem with javascript running because it is cashed.

Example

//Init onClick event
$(document).on('click', '.select', function(){
    //Check if select has value
    if( $(this).val() ){
        console.log( $(this).val() )
    } else {
        console.log('no value')

        $(this).on('change', function(){
            console.log('Changed!')
        }
    }
}

PROBLEM
Now consider i have a select. From start the value is empty and the option is disabled. First time i click the select, console will log "no value".
You click and you change option/value to something in the list.

Second time i click the select, an option is selected and it has a value. Console will now log "the value", but it will also log "changed".

I guess it's because i have run the else statement before and the onChange function is cashed in my browser or something like it...

How can i prevent this from happen.. or how should i write my code instead?
I need to check if a value is selected from start.. and i need to use the onChange function...

UPDATE
When you click the select, i'd like to know if the select has a selected value. (To know if you change/edit a value OR if you choose value for first time) This is why i have a onClick function. Here i check the value.

After you clicked and i have checked the value, i like to trigger a onChange function.. that will do this for the edit route.. or that for the new route..

I have a problem with javascript running because it is cashed.

Example

//Init onClick event
$(document).on('click', '.select', function(){
    //Check if select has value
    if( $(this).val() ){
        console.log( $(this).val() )
    } else {
        console.log('no value')

        $(this).on('change', function(){
            console.log('Changed!')
        }
    }
}

PROBLEM
Now consider i have a select. From start the value is empty and the option is disabled. First time i click the select, console will log "no value".
You click and you change option/value to something in the list.

Second time i click the select, an option is selected and it has a value. Console will now log "the value", but it will also log "changed".

I guess it's because i have run the else statement before and the onChange function is cashed in my browser or something like it...

How can i prevent this from happen.. or how should i write my code instead?
I need to check if a value is selected from start.. and i need to use the onChange function...

UPDATE
When you click the select, i'd like to know if the select has a selected value. (To know if you change/edit a value OR if you choose value for first time) This is why i have a onClick function. Here i check the value.

After you clicked and i have checked the value, i like to trigger a onChange function.. that will do this for the edit route.. or that for the new route..

• javascript
• jquery

Share Improve this question Follow edited Nov 21, 2016 at 10:02 vsync 131k5959 gold badges340340 silver badges423423 bronze badges asked Nov 21, 2016 at 9:50 Björn CBjörn C 4,0081111 gold badges5252 silver badges8787 bronze badges 5

• 1 What are you trying to achieve? I can't figure it out. – Chris Dąbrowski Commented Nov 21, 2016 at 9:52
• 1 change listener will not invoke its handler if it is disabled.. Use $('.select').on('change', function(){ console.log('Changed!') } as you have click listener.. – Rayon Commented Nov 21, 2016 at 9:52
• I have now tried to explain more... – Björn C Commented Nov 21, 2016 at 10:00
• @Rayon my select's are dynamic added. I cannot use a selector like ".select" i need to use document to find it.. and this to specify it.. – Björn C Commented Nov 21, 2016 at 10:02
• @Mjukis — Well in that case, Read about Event delegation – Rayon Commented Nov 21, 2016 at 10:03

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You should only add "change" event on the select. Operations on a select element must be done in terms of it's state changed w.r.t it's options

 var pervious;
 //Init onClick event
$(document).on('focus','.select', function () {
    // Store the current value on focus and on change
    previous = this.value;
}).
on('change', '.select', function(){
    //Check if select has value
    if( $(this).val() ){
      console.log( $(this).val() );
      previous = this.value;
    }
    else{
      console.log('no value')
      // YOUR choice, reset it i.e. previous = null;
    }
});

The main problem I see on your code is that you are binding the change listener inside the click listener, so every time you click you bind another change event, giving you the idea of cashed onchange function. Take your change function outside the click delegating it properly. Something like:

$(document).on('click', '.select', function(){
    //Check if select has value
    if( $(this).val() ){
        console.log( $(this).val() )
    } else {
        console.log('no value')
    }
})
$(document).on('change', '.select', function(){
    console.log('Changed!')
})

本文标签： javascriptHow to use jQuery onChange with ifelse statement39sStack Overflow