Jquery uniform duplicates

Question

I use jquery uniform on my main page, simply using the code below

$(document).ready(function () {
    $("select").uniform();
    
});
$('#opendiv').load("popuppage.php").dialog({
        width: 420,
        height: 520,
        modal: true,
        draggable: false,
        resizable: false,
        title: 'Title',
        buttons: {
            Cancel: function () {
                $('#opendiv').dialog("close");
            },
            Submit: function () {
                $("#formname").submit();
            }
        }
    });

as you see in my code, the main page opens a dialog popup which loads a page and displays form elements like selects, they dont have uniform applied unless I call uniform again in the popup page itself, after I finish working with the popup and close, if I tried to click the select on my main page it doesnt work, see how it looks in the inspector

the uniform was applied to it twice, how can I solve that ?

Answer 1

You should make your selector more specific. When you apply uniform on the <select> elements of your dialog, you also re-apply it on the <select> elements of everywhere.

Try to be as specific as possible when selecting elements in HTML pages. Read about it here.

Answer 2

from the docs:

// Avoid styling some elements
$("select").not(".skip_these").uniform();  // Method 1
$('select[class!="skip_these"]').uniform();  // Method 2