Изменить атрибут из div при изменении размера окна

Question

Я работаю с jQuery mobile. В этом случае я хочу добавить разворачиваемую роль данных в div, когда ширина экрана меньше 960 пикселей.

В моем примере это работает только при загрузке сайта. Но я хочу, чтобы он также работал, когда я изменяю размер браузера без перезагрузки страницы.

Изменение от> 960 px до < 960 px это, например, при повороте планшета или изменении размера окна браузера вручную.

$(document).on("pagebeforecreate", function() { 
    if ($(window).width() < 960) { 
     $(".medis_collaps").attr("data-role","collapsible") 
    } 
}); 

Редактировать

.resize() не работает, потому что кажется, что я должен перезагрузить страницу, чтобы сделать данные-роль = «разборные» работает.

Answer 1

использование также resize

$(window).resize(function() { 
    if ($(window).width() < 960) { 
     $(".medis_collaps").attr("data-role","collapsible") 
    } 
}); 

Answer 2

Вы можете связать изменения размера и нагрузки события следующим образом:

$(window).on('resize load pagebeforecreate', function(){ 
    if ($(window).width() < 960) { 
     $(".medis_collaps").attr("data-role","collapsible") 
    } 
}); 

В этом случае нет необходимости связывать такую ​​же функциональность навсегда события.

Answer 3

Вы можете использовать так:

$(document).on("load resize pagebeforecreate", function() { 
    if ($(window).width() < 960) { 
     $(".medis_collaps").attr("data-role","collapsible") 
    } 
});