Question

大家好我正在使用以下代码将锚链接添加到jquery移动网站。

<script>
$(document).ready(function() {

    $('a.anchor-link').click(function(e) {
        // Extract the hash in the target. 
        // No hash means that the target is not an <a> tag but one of its children (i.e. an <h3>)
        hash =  $(e.target).get(0).hash;
        if (!hash) {
            hash = $(e.target).parents('a').get(0).hash;
        }
        // Find the page it is contained into (or it is itself)
        page = $(hash).closest('div[data-role="page"]').get(0);

        // Look if we are already in that page
        if ($(page).get(0) != $.mobile.activePage.get(0)) {
            // Change to it and scroll to the anchor
            $.mobile.changePage($(page));
            $(page).on('pageshow', function(){
                $.mobile.silentScroll($(hash).offset().top);
            });
        } else {
            // Just scroll to the anchor
            $.mobile.silentScroll($(hash).offset().top);
        } 
    });
});

</script>

如果我在标记中嵌入了如下链接并链接到类锚链接，那么这很有用。

<a href="#my-anchor" class="anchor-link">My link</a>

然后在页面

<div id="my-anchor">My content</div>

但我页面上的命名锚点作为表格的结果发送，如下所示

<form action="mypage.html#my-anchor" id="form1" class="anchor-link" method="post" data-ajax="false">
<input type='submit' name='button' value='Submit Button' data-theme='a'  />
</form>

有人能告诉我如何修改jquery片段以从表单操作部分读取链接，而不是如上所述的a href。我想我可以解决我的问题。

提前致谢

Answer 1

根据您的需要，我会看到两种可能的解决方案：

回复表格并提交＆＃39;事件，而不是锚点击事件。

$("form").on('submit', function() 
{ 
    // Your code here;
    return false;
});

绑定到＆＃34; form.anchor-link输入＆＃34; （或类似的东西）

$("form.anchor-link input").on("click", function() 
{
    var parentForm = $(this).parent();
    if(parentForm.length == 0) 
    {
        parentForm = $(this).parentsUntil("form").parent();
    }
    // ... extract url data from the form element ...
    // Your code here 
}

我测试了这两种方法，并且它们适用于您提供的DOM示例。

如果您不希望表单实际运行提交操作，请务必返回false。对于第二个选项，您可能需要将$（）搜索限制为输入[type =＆＃39; submit＆＃39;]。

-Matt

Jquery Mobile以形式命名为Anchor

1 个答案: