在 Shadowbox 内/内调用 Jquery答案

【问题标题】：Calling Jquery within / inside a Shadowbox在 Shadowbox 内/内调用 Jquery
【发布时间】：2012-11-01 17:58:58
【问题描述】：

我有一个由 jquery 调用的简单 Shadowbox：

$('#statsButton').click(function() {
    thisContent = $('#userStats').html();
    Shadowbox.open({
        content: thisContent,
        player: "html"
    });
});

我有一个 div，在那个 $('#userStats') 对象中应该在点击时发出警报：

$("#submitPosition").click(function(e) {
        alert('test');
});

但是当我点击时，什么也没有发生。上述两个函数都包装在它们自己的文档就绪块中。我在脚本开头打电话给Shadowbox.init，效果很好。只是它忽略了里面的jQuery事件。有人可以帮忙吗？

简短回顾：基本上我有 Shadowbox 和 HTML 播放器。我希望 jQuery 在该 HTML 播放器中按预期运行。

【问题讨论】：

标签： jquery shadowbox

【解决方案1】：

如果要将内容动态加载到容器中，则应使用 jQuery on() 将事件绑定到内容内的对象，因为使用 click() 只会将事件绑定到现有的 #submitPosition。

例如：

$('body').on('click', '#submitPosition', function(e) {
   alert('test');
});

此外，在同一 id 的页面上使用多个元素也不是一个好习惯。

http://api.jquery.com/on/

【讨论】：

最初不会有多个具有相同 id 的元素，但是一旦来自 #userStats div 的内容加载到 Shadowbox 中，就会有两个 #submitPosition 实例（在 #userStats 和 Shadowbox 中）。只是要记住的事情！
我将其更改为正确答案有两个原因：1. live 已被弃用，on 是正确使用的 jquery 2. 发帖人提到 id 重复，这是非常正确的（事实上, 如此真实，以至于当我尝试通过 ajax 响应修改它时，它失败了。shadowbox 内的任何东西都应该是一个类）

【解决方案2】：

试试这个：

$(document).ready(function(){    
    $("#submitPosition").live('click',function(e) {
            alert('test');
    });
});

这会有所帮助。 Bcoz 当这段代码初始化时 #submitPosition 在 html 中不存在。但live会解决这个问题。

【讨论】：

【解决方案3】：

我看到了 2 个选项：

1) 在您的 userStat div 中，更改为：

$("#submitPosition").click(function(e) {
    alert('test');
}).click();

实际上会调用你的回调函数。

2) 使用shadowbox的onOpen事件：

$('#statsButton').click(function() {
    thisContent = $('#userStats').html();
    Shadowbox.open({
        content: thisContent,
        player: "html",
        onOpen: function(){ alert('test'); } 
    });
});

【讨论】：