JQuery Click Event On Select Element Not Working As Desired On Chrome 54
I have this code: HTML
Solution 1:
You should use change event instead of click
Just change the event in your JS. The updated code looks like
$('[name=footerLayout]').change(function() {
var selector = ".column-" + $(this).val(); //Create selector
$(".column").not(selector).hide(); //Hide others
$(selector).show(); //Show column based on selected value
});
See the working fiddle https://jsfiddle.net/mk425srx/2/
Update
The reason of click event not working as expected is because of, click event get fired when the element is clicked but change event is fired after the value get changed. So click event is fired earlier and before the value selection is changed. That's why click event shouldn't be used to detect change of value.
To be clear about this, try the following code to see the fact.
$('[name=footerLayout]').change(function() {
console.log($(this).val());
});
$('[name=footerLayout]').click(function() {
console.log('clicked');
});
Fiddle link: https://jsfiddle.net/mk425srx/3/
Post a Comment for "JQuery Click Event On Select Element Not Working As Desired On Chrome 54"