Jquery X-可编辑，从弹出更改为内联，响应

我正在使用X-Editable对我的数据进行内联编辑-

这一切都很好，但现在我想让它在更小的屏幕上响应得更好一些。任何小于600px的宽度都可以使用“内联”来查看。然而，一旦你低于这一点，它就会开始移动其他列。解决此问题的唯一方法是将其从“内联”更改为“弹出”。我想到了：

$(document).ready( function() { 

    $.fn.editable.defaults.mode = 'inline';

    if ($(window).width() < 600) {
        console.log("Changing to popup");
        $.fn.editable.defaults.mode = 'popup';
    }

    $('.text-editor-num').editable( {
        type: 'number',
        url: '/cgi-bin/links/booking/admin.cgi',
        params: { action: "reservation_edit_item" }
    }); 

    $(window).resize(function() { 
        if ($(window).width() < 600) {
            console.log("Changing to popup");
            $.fn.editable.defaults.mode = 'popup';
        } else {
            console.log("Changing to inline");
            $.fn.editable.defaults.mode = 'inline';
        }
    });

});

。。。但无济于事

---

谢谢

您需要先删除x轴。 将调整函数大小更改为：

 $(window).resize(function() { 
    if ($(window).width() < 600) {
        console.log("Changing to popup");
        $('.text-editor-num').editable('destroy');
        $('.text-editor-num').editable({
            mode: 'popup',
        });
    } else {
        console.log("Changing to inline");
        $('.text-editor-num').editable('destroy');
        $('.text-editor-num').editable({
            mode: 'inline',
        });
    }
});

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<600）{
console.log（“更改为弹出窗口”）；
$（'.text editor num'）。可编辑（'destroy'）；
$（'.text editor num'）。可编辑({
模式：“弹出”，
});
}否则{
log（“更改为内联”）；
$（'.text editor num'）。可编辑（'destroy'）；
$（'.text editor num'）。可编辑({
模式：“内联”，
});
}
});

aaah-成功了！

destroy

是我丢失的位。谢谢

  $('.text-editor-num').editable('option','mode','popup');

 $(window).resize(function() { 
    if ($(window).width() < 600) {
        console.log("Changing to popup");
        $('.text-editor-num').editable('destroy');
        $('.text-editor-num').editable({
            mode: 'popup',
        });
    } else {
        console.log("Changing to inline");
        $('.text-editor-num').editable('destroy');
        $('.text-editor-num').editable({
            mode: 'inline',
        });
    }
});