jQuery Mobile的 - 将内容加载到一个div [英] jquery mobile - loading content into a div

问题描述

jQuery Mobile的工作原理是劫持一个页面，加载的内容，并注入到页面。

Jquery Mobile works by "hijacking" a page and loading content and injecting it into the page.

看来，这造成了一个问题，当我尝试注入其他内容到页面。

It seems that this creates a problem when i try to inject other content into the page.

我有我的index.html，然后page2.html文件。我设置了jQuery Mobile的正常方式包装每一页的内容，像这样一个div：

I have my index.html and then a page2.html file. I'm setting up jquery mobile in the normal fashion wrapping the contents of each page in a div like so:

<div id="container" data-role="page">
   // my content
<a href="page2.html">go to page 2</a>
</div>

当用户点击进入第2页，它漂亮的幻灯片效果。在地址栏中的URL看起来是这样的：index.html的＃page2.html

when the user taps go to page 2, it does the nice slide effect. The url in the location bar looks like this: index.html#page2.html

jquery的移动注入使用锚页面的内容和应用的过渡。漂亮所以全部的寄托的伟大工程，到下一个部分。

jquery mobile inject the content of the page using the anchors and applies the transition. nice so everthing works great up to the next part.

在page2.html，我有一节是加载一些外部数据和将其注入到一个div。

On page2.html, i have a section that is loading some external data and injecting it into a div.

<a href="http://www.somedomain.com/myata.php" class="ajaxtrigger" data-role="none">mydata</a>
<div id="target"></div>
<script src="js/code.js"></script>
<script src="js/loader.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('.ajaxtrigger').trigger('click');
});
</script>

我遇到的问题是，当我启用jQuery Mobile的过渡这个脚本不起作用。它不会将数据加载到分区。令人失望。

The problem i am having is that when i enable the transitions in jquery mobile this script doesn't work. It won't load the data into the div. bummer.

有谁知道我需要做的就是它触发并加载的内容放到这个DIV？

Anyone know what i need to do to get it to trigger and load the content into that div?

推荐答案

另一种选择是生成一个唯一的ID为要处理的每个页面加载的DOM元素，这样你就不会有重复的问题IDS亚当描述。我已经在C＃中做到了这一点（W /剃刀语法），像这样：

Another option would be to generate a unique id for the DOM element you want to manipulate on each page load, so that you don't have the problem with duplicate ids that Adam describes. I've done this in C# (w/Razor syntax) like so:

@{ string headerAutoGenSym = "header_" + new System.Random().Next(1000000000); }
@section header
{
    <div id="@headerAutoGenSym"></div>

    <script type="text/javascript">
        $(function () {
            $(document).bind("pageinit", function () {
                $.get(
                    '@Url.Action("myAjaxURL")',
                    function (data) {
                        $('#@headerAutoGenSym').append(data);
                    }
                );
            });
        });
    </script>
}

这篇关于jQuery Mobile的 - 将内容加载到一个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！