小编典典

如何通过jquery模拟锚定点击?

html

我在通过jQuery伪造锚点单击时遇到问题:为什么我的thickbox第一次单击输入按钮时出现,但第二次或第三次却没有出现?

这是我的代码:

<input onclick="$('#thickboxId').click();" type="button" value="Click me" />

<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

当我直接单击链接时,它总是起作用,但是如果我尝试通过输入按钮激活thickbox,则它不会起作用。这是在FF。对于Chrome,它似乎每次都能正常工作。有什么提示吗?


阅读 303

收藏
2020-05-10

共1个答案

小编典典

尽量避免内联这样的jQuery调用。将脚本标签放在页面顶部以绑定到click事件:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        $('#thickboxId').click();
    });
});
</script>

<input id="thickboxButton" type="button" value="Click me">
<a id="thickboxId" href="myScript.php" class="thickbox" title="">Link</a>

编辑:

如果您试图模拟实际点击链接的用户,那么我认为这是不可能的。一种解决方法是更新按钮的click事件以更改window.locationJavascript中的:

<script type="text/javascript">
$(function(){
    $('#thickboxButton').click(function(){
        window.location = $('#thickboxId').attr('href');
    });
});
</script>

编辑2:

现在,我意识到Thinbox是一个自定义jQuery
UI小部件,我在这里找到了说明:

说明:

  • 创建链接元素(<a href>
  • 为链接赋予一​​个类属性,其值具有thickbox(class="thickbox"
  • href链接的属性中,添加以下锚点:#TB_inline
  • href属性之后,#TB_inline将以下查询字符串添加到锚点:

?height = 300&width = 300&inlineId = myOnPageContent

  • 相应地更改查询中的height,width和inlineId的值(inlineID是元素的ID值,该元素包含要在ThinBox中显示的内容。

  • (可选)您可以将modal = true添加到查询字符串(例如#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true),以便关闭ThickBox将需要tb_remove()从ThickBox内部调用该函数。请参见隐藏的模态内容示例,在该示例中必须单击“是”或“否”以关闭ThinBox。

2020-05-10