CODEWITHSUNDEEP
javascriptjqueryjquery-mobilejquery-events
Asim Zaidi
Asim Zaidi

Reputation: 28284

Wrong class is triggered

I have a html like this:

<div id="jquery-modal" class="close" style="position: absolute; top: 0px; right: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.701961); z-index: 5; height: 653px; background-position: initial initial; background-repeat: initial initial;">
    <div class="myclass" data-multiselect="0" style="height: 633px; top: 10px; display: block;"></div>
    <div class="myclass" data-multiselect="1" style="height: 633px; top: 10px; display: block;"></div>
</div>

Please notice the multiselect 1 and 0 in above html now in my js I am applying the toggle depending on multiselect. problem is that when I click the myclass div with data-multiselect="1" it still grabs the div above it with data-multiselect=0 How can I fix my js to handle this. Here is my js:

function onClickingLi(event) {     
    var Selector = $('#jquery-modal').children('.myclass');
    var isMultiselect = Selector.data('multiselect');
    if (isMultiselect) {
         $(event.target).toggleClass('selected');
    }
    else {
        Selector.find('li.selected').removeClass('selected')
    }
}

Upvotes: 0

Views: 92

Answers (1)

Sushanth --
Sushanth --

Reputation: 55740

$('#jquery-modal').children('.myclass');

will fetch you 2 elements (jQuery objects)

<div class="myclass" data-multiselect="0" 
<div class="myclass" data-multiselect="1"

So when you try to use this var isMultiselect = Selector.data('multiselect'); it will always fetch the first instance of class which has multiselect=0

So you need to mention how the click event is bound and to which will make targeting the specific class a lot easier.

Upvotes: 3

Related Questions