我可以将更新面板与 jQTouch 一起使用吗？

Question

我正在使用 ASP.NET 控件为我的 jQTouch 应用程序填充 HTML，但我遇到了问题，因为我的 href 无法在我的搜索页面上按预期运行。我的锚类的 jQuery 函数显然没有被调用；它只是链接回默认页面，即使该链接是在其他页面上类似构建的，没有任何问题。

这就是我的链接失效的地方：

<form id ="form1" runat="server" class="form">
   <asp:ScriptManager ID="ScriptManager1" runat="server" />
   <asp:UpdatePanel runat="server" ID="up1">
       <ContentTemplate>
           <ul class="rounded">
               <li><asp:TextBox ID="txtSearchString" runat="server" name="search-articles" placeholder="Search GROK"></asp:TextBox></li>
               <li><asp:Button ID="btnSearch" runat="server" Text="Search" type="rounded" OnClick="btnSearch_Click"></asp:Button></li>
           </ul>
           <asp:Literal ID="litSearchResults" runat="server"></asp:Literal> <%--HTML for jQTouch inserted here--%>
       </ContentTemplate>
   </asp:UpdatePanel>
   </form>

这是由隐藏代码生成的 HTML 的示例。

<ul class="edgetoedge"><li class="sep">Found 101 articles</li><li><a href="#article" class="articleLink" id="4773">PAWS: How to Access the Sample Test Database</a></li><li><a href="#article" class="articleLink" id="6464">Mac OS X: Hardware Test</a></li><li><a href="#article" class="articleLink" id="10483">The JavaScript Test</a></li><li><a href="#article" class="articleLink" id="14110">PAWS: Emergency Text Message Test</a></li><li><a href="#article" class="articleLink" id="3659">Definition: remote digital loopback test</a></li><li><a href="#article" class="articleLink" id="4333">Definition: power-on self test</a></li><li><a href="#article" class="articleLink" id="4346">Definition: power-on self test</a></li><li><a href="#article" class="articleLink" id="14166">AVG 9.0 Free Edition: Setting Scan Process Priority</a></li><li><a href="#article" class="articleLink" id="4187">Microsoft Office 2007: Diagnostics</a></li><li><a href="#article" class="articleLink" id="7301">Moodle: Description of Aggregation Methods</a></li><li><a href="#article" class="articleLink" id="14124">AVG 9.0 Free Edition: How can I run the complete scan of whole computer?</a></li><li><a href="#article" class="articleLink" id="13758">LSU A-Z: Office of Assessment and Evaluation</a></li><li><a href="#article" class="articleLink" id="10765">Linux: sed Insert a Newline Into the RHS of a Substitution</a></li><li><a href="#article" class="articleLink" id="5193">Microsoft PowerPoint 2007: Narrating a Slide</a></li><li><a href="#article" class="articleLink" id="7401">Ubuntu:  Deleting Undeletable Files In the Trash</a></li><li><a href="#article" class="articleLink" id="10812">Linux: Remove All Digits/ Input From Inputs</a></li><li><a href="#article" class="articleLink" id="13643">SQL: Create a MySQL DocDB Databse</a></li><li><a href="#article" class="articleLink" id="5784">Linux Gnome: Screens and Graphics</a></li><li><a href="#article" class="articleLink" id="5731">Linux Xfce: Adjust keyboard settings</a></li></ul>

jQTouch 正常处理所有其他标签，只是锚点由于放置在该表单中而不再按预期发挥作用。我可以继续在这里使用更新面板吗？还是会不可避免地损坏？有解决方法吗？或者我处理问题的方式不正确？ 请记住，我想保留 jQTouch 生成的 AJAXical 动画。如果您发现我不清楚或者您想查看更多代码（我只包含我认为必要的代码），请告诉我。

如果你能告诉我如何让 jQTouch 用 iPhoney 按钮替换丑陋的 ASP.NET 按钮控件，那就加分了。 :)

Answer 1

我认为您必须进行大量的修改才能使 ASP.Net 与带有更新面板的 jqtouch 一起工作，因为您将与 ASP.Net 插入的 JavaScript 与 jqtouch 插入的 JavaScript 进行斗争。在您的示例中，所有链接都将指向同一个锚点（#article）。要以 jQtouch 的方式执行此操作，您需要将所有链接转到“#”并处理articleLinkClass 的点击，然后根据需要进行调整。

$('.articleLink').tap(function() 
{ 
    var id = $(this).val('id');
    // Pseudo CODE HERE FOR Setting up the article based on id...  E.g.
    $.json(jsonServiceUrl, { article_id: id }, function(data)
    {
        $('#article data).html(data);
    });
    jQt.goTo('article'); // Display the article page...
});

iPhoney 按钮是在 jQtouch 中创建的，其类为“whiteButton”，即：

<a id="myTestButton" class="whiteButton">Test Button</a>

希望这有帮助......