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>

I recommend using `.hide()` and `.show()` instead of manipulating the CSS directly. — Barmar, Aug 23 '19 at 21:43
@Barmar, I have tried to use .show() and .hide(), but it still doesn't work( — topit, Aug 23 '19 at 21:47
`$(this).parent().parent().parent().children().get(0);` is definitely proof you're doing it very wrong. Check out `el.closest`. — connexo, Aug 23 '19 at 21:55
_"it's adding from js"_ if the element is added dynamically after `$(document).ready` callback has been called then those elements will not have that event listener attached. You need to use event delegation — Patrick Evans, Aug 23 '19 at 21:57
Possible duplicate of [How do I attach events to dynamic HTML elements with jQuery?](https://stackoverflow.com/questions/1359018/how-do-i-attach-events-to-dynamic-html-elements-with-jquery) — disinfor, Aug 23 '19 at 22:17
Click event for `.divOption` element which doesn't exist in your HTML. Perhaps that's your issue. — Lazar Momcilovic, Aug 24 '19 at 07:26

score 0 · Accepted Answer · answered Aug 29 '19 at 19:27

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 :) !!

Can't change css style property with jquery

1 Answers1