我们可以使用 Javascript 在 div 类上调用 click 函数吗答案

【问题标题】：Can we invoke click function on div class using Javascript我们可以使用 Javascript 在 div 类上调用 click 函数吗
【发布时间】：2011-08-26 13:02:54
【问题描述】：

我已经使用 div 类实现了颜色框功能

<script type="text/javascript">
$(document).ready(function(){
$(".exampleclass").colorbox({iframe:true, open:true, width:"50%", height:"50%"});
})
</script>

现在我想知道是否可以从 Javascript 触发一个事件，该事件将在我不点击 div 元素的情况下动态打开颜色框。

【问题讨论】：

标签： javascript jquery jquery-events colorbox

【解决方案1】：

查看 Jquery 的 trigger 函数

Jquery Trigger

【讨论】：

【解决方案2】：

你可以这样称呼它：

$.colorbox({iframe:true, open:true, width:"50%", height:"50%"});

编辑：您可能需要先运行：

$.colorbox.init();

【讨论】：

【解决方案3】：

检查 http://api.jquery.com/trigger/

和 http://groups.google.com/group/comp.lang.javascript/browse_thread/thread/27e7c70e51ff8a99/98cea9cdf065a524

【讨论】：

【解决方案4】：

您可以使用的 jQuery 解决方案之一

$('selector').trigger('click');

这在程序上与正常点击完全一样。

请注意，您必须在页面中加载 jQuery。可以从其中一台 CDN 服务器加载。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

【讨论】：

【解决方案5】：

当然，Rahul，通过 jquery click() 函数打开颜色框很容易。但首先您需要更改您的 docReady 代码，使其看起来更像这样：

$(document).ready(function(){
        $("#example-id").click(function() {
            $(this).colorbox({iframe:true, open:true, width:"50%", height:"50%"})
        });
})

请注意，我已将带有“open:true”选项的代码放在点击处理程序中。您可能已经看到，在 docReady 上运行该选项会导致您的颜色框在页面加载时打开。

现在点击处理程序已准备就绪，您可以简单地打开框 - 当然是点击 - 但使用以下代码动态：

$("#example-id").click();

无论您在哪里拥有它，您的颜色框都会打开。因此，您可以将它放在 $.ajax() 成功或错误处理程序或 $.load() 完成处理程序中。另外，我使用了点击处理程序，但如果您不需要点击功能，您可以轻松地将颜色框代码放在标准函数中，然后在需要时调用该函数。

顺便说一句，我将您的 exampleClass 更改为 example-id，因为将超过 1 个元素附加到点击处理程序会产生对颜色框的多次调用。如果所有类都打开相同的颜色框，这不会造成任何问题。如果您有兴趣查看同一类打开不同颜色框的示例，我可以对此进行扩展（但我会从简单地将属性嵌入标签并在点击处理程序中查找它们开始）。

最后一点，colorbox 通常与一个标签相关联，该标签将有一个 href 和一个标题。这是 colorbox 从中获取内容和标题的地方。您可以简单地将 href 和 title 标签添加到您的 .但是，HTML 验证器不喜欢 div 中的 href，所以如果这对您很重要，那么您应该将其添加到颜色框选项中：

$(this).colorbox({href: "http://stackoverflow.com", iframe:true, ... })

【讨论】：

【解决方案6】：

另外，触发器调用的函数需要在不分配给元素的模式下调用ColorBox。

所以 .trigger() 方法调用了一个调用 colorbox 的函数，如下所示。

$.colorbox()

此方法允许您调用 ColorBox 而无需将其分配给元素。示例：$.colorbox({href:'login.php'});

在colorbox docs 上查看更多信息。

【讨论】：