Can't change css style property with jquery
Question
In CSS I have a block with the display:none property. There is a button element which changes this property to block . Then I press the button element in the block, which was shown, but it does not display.
I tried to change other CSS properties in the line of code line that is marked with the comment //hiding but it doesn't work either.
CSS
.optionPanel{
width: 20rem;
height: 10rem;
overflow: auto;
background: whitesmoke;
display: none;
}
JS
$(document).ready(()=>{
selectsFiling();
$('.divOption').click(function (e){
let _select = $(this).parent().parent().parent().children().get(0);
let _label = $(this).parent().parent();
let _span = _label.children().get(1);
$(_select).val(this.textContent);
let k = $('.optionPanel');
k.css('display', 'none'); //hiding
_span.textContent = this.textContent;
});
$('.fluentSelect label').click(function (e){
let _labelPanel = $(this).children(':first');
_labelPanel.css('display', 'block'); //showing
});
});
HTML
<body>
<div class="fluentSelect">
<select name="r-select" id="r-select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<label>
<div class="optionPanel">
</div>
<span></span>
</label>
</div>
</body>
1 answers
solution1
0 2019-08-29 19:27:31
Try adding click with live. Since the button is getting added in runtime, click listener won't be getting added to button.
Change code to something like this - $(". divOption").live("click", function(){ ... })
Check here for doc : https://www.w3schools.com/jquery/event_live.asp
And if the code is still not working, first check with only console.log("click") as the code
let _select = $(this).parent().parent().parent().children().get(0);
let _label = $(this).parent().parent();
let _span = _label.children().get(1);
$(_select).val(this.textContent);
looks really dicey. There could possibly some error or issue with the element selection. Though hope live() works :) !!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.