jquery在页面加载后重新启动功能

Question

我有一个功能从Turn4JS，它在网站上生成一个图书用户界面。麻烦的是Javascript/JQuery细节接受绝对像素的宽度和高度的书籍大小，而不是以百分比或任何其他格式。

例如：

$(document).ready(function() { 
    $("#guestbook").turn({ 
     width: 500, /* pixels */ 
     height: 360, 
     autoCenter: true 
    }); 
}); 

与此麻烦的是，该网站是移动兼容（当然）等书的小型智能电话设备的尺寸应该是300像素宽的最大值，但显然在较大的屏幕看起来非常小。

因此，我在Javascript上运行媒体查询以根据浏览器大小设置宽度/高度值。我设置成上文件准备发射以及对窗口调整和窗口方向变化

jQuery的功能是：

function guestbookSize() { 
    if ($(window).width() > 1200) { 
     $("#guestbookbook").turn({ 
      width: 700, 
      height: 500 
     }); 
    } 
    else if ($(window).width() <= 1200 && $(window).width() > 801) { 
     $("#guestbookbook").turn({ 
      width: 500, 
      height: 360 
     }); 
    } 
    else if ($(window).width() <= 800 && $(window).width() > 360) { 
     /* You get the idea */ 
    } 
    else if ($(window).width() <= 360) { 
     $("#guestbookbook").turn({ 
      width: 300, 
      height: 360 
     }); 
    } 
} 

$(document).ready(function() { 
    $(document).ready(guestbookSize); 
}); 
$(window).on("orientationchange",guestbookSize); 
$(window).resize(guestbookSize); 

我敢肯定，我编码这非常糟糕，但文件加载调用每次都有效。

窗口调整大小调用不起作用。

所以我的问题是这样的：

我怎样才能重新初始化为guestbookSize函数中.turn功能的选项，而不刷新整个页面？

---

注意：

• 我使用JQuery 1.11.3
• 我已阅读Refire ready event after AJAX reload这似乎相似，但没有运气。
• 我探索了Turn4JS official documentation这是最好的补丁。
• 我确实有两种选择，要么编辑Turn4JS jquery文件来接受看起来像是一个可怕的工作的百分比，要么根据客户端屏幕大小/方向对给定的width/height进行大小调整。

---

错误：对萤火虫遇到的turn选项重新丁祖泉

错误：

HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy

..xp("<(?:"+ea+")[\s/>]","i"),ha=/^\s+/,ia=/<(?!area|br|col|embed|hr|img|input|li...

引用线4 jquery.1.11.3.min.js。

Answer 1

我在document.ready中添加了事件绑定并删除了重复项。

似乎工作 - 在Chrome 48，FF 43，IE9测试 - 他们所有的工作（在Windows上）

$(document).ready(function() { 
 
    initBook(300, 400); 
 
    $(window).on("orientationchange", guestbookSize); 
 
    $(window).resize(guestbookSize); 
 
}); 
 

 
function initBook(w, h) { 
 
    $("#flipbook").turn({ 
 
    width: w, 
 
    height: h 
 
    }); 
 
} 
 

 
function guestbookSize() { 
 
    if ($(window).width() > 1200) { 
 
    initBook(700, 500); 
 
    } else if ($(window).width() <= 1200 && $(window).width() > 801) { 
 
    initBook(500, 360); 
 
    } else if ($(window).width() <= 800 && $(window).width() > 360) { 
 
    initBook(400, 360); 
 
    } else if ($(window).width() <= 360) { 
 
    initBook(300, 360); 
 
    } 
 
}

/* to see book resize */ 
 

 
#flipbook { 
 
    border: 2px solid green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="http://www.turnjs.com/lib/turn.min.js"></script> 
 

 
<h2> 
 
Book 
 
</h2> 
 
<div id="flipbook"> 
 
    <div class="hard">Turn.js</div> 
 
    <div class="hard"></div> 
 
    <div>Page 1</div> 
 
    <div>Page 2</div> 
 
    <div>Page 3</div> 
 
    <div>Page 4</div> 
 
    <div class="hard"></div> 
 
    <div class="hard"></div> 
 
</div> 
 
<hr/>