我们可以使用javascript在div类上调用click函数吗

我已经在一个div类上使用

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

$（文档）.ready（函数（）{
$（“.exampleclass”）.colorbox（{iframe:true，open:true，宽度：“50%”，高度：“50%”）；
})

现在我想知道是否可以从javascript触发一个事件，该事件将在不单击div元素的情况下动态打开colorbox

---

提前感谢

参见Jquery的

触发器

功能

---

你可以这样称呼它：

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

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

编辑：您可能需要先运行以下命令：

$.colorbox.init();

检查

及

---

您可以使用的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>

---

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

因此.trigger（）方法调用一个调用colorbox的函数，如下所示

$.colorbox（）

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

---

请参阅。

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

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

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

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

现在，在click处理程序就绪的情况下，您只需使用以下代码打开该框-当然，单击-但要动态打开：

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

无论您身在何处，您的配色箱都会打开。因此，您可以将其放在$.ajax（）成功或错误处理程序或$.load（）完成处理程序中。此外，我还使用了一个单击处理程序，但是如果您不需要单击功能，那么您可以很容易地将colorbox代码放在一个标准函数中，然后在需要时调用该函数

顺便说一下，我将exampleClass更改为ExampleID，因为将多个元素附加到click处理程序将产生对colorbox的多个调用。如果所有类都打开同一个颜色框，则不会出现问题。如果您有兴趣看到一个同一类打开不同颜色框的示例，我可以在这个示例上进行扩展（但马上我将开始简单地将属性嵌入到标记中，并在单击处理程序中查找它们）

最后一个注意事项是，colorbox通常与一个标记相关联，该标记将包含一个href和一个标题。这是colorbox获取内容和标题的地方。您可以简单地将href和title标签添加到您的应用程序中。Html验证器不会喜欢div中的href，因此如果这对您很重要，您应该将其添加到colorbox选项中：

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