JavaScript - 所有onClick事件都不起作用？

Question

好吧，所以我正在进行Facebook风格的聊天。但这并不重要。

见这里： http://jsfiddle.net/SkHme/7/

很漂亮，对吧？好吧，有一个问题。注意这一行：

<div class="conversation EmperorCuzco" onclick="setActive('EmperorCuzco')">

请参阅onclick属性？好吧，它不起作用。但是，我已经确认该功能本身可以正常工作。 （如果你像在JavaScript中一样运行它，它就像梦一样运行）我通过尝试用简单的onclick替换alert('blah')值进一步确认该函数不是问题，但是这也不起作用。

那么，怎么了？我猜测我的JavaScript中的某些内容会以某种方式禁用某些内容，但我完全不知道它可能是什么，也不知道如何修复它。我做了一些网络搜索，但找不到任何有用的东西。

发生了什么事？

Answer 1

setActive函数在$(document).ready处理程序的范围中定义了。将该函数移到该函数之外，使其处于全局范围内。

现在它看起来像这样：

$(document).ready(function()
{
    // ...
    function setActive(new_conversation)
    {
        // ...
    }
});

现在改为：

$(document).ready(function()
{
    // ...
});

function setActive(new_conversation)
{
    // ...
}

但实际上，您应该将内容与交互分开，并将这些事件处理程序绑定在脚本本身中。类似的东西：

// Refers to the last clicked conversation *button*
// Initialize to empty jQuery object
var $active_conversation = $([]);

// Binding on #chat, targeting click events on .conversation_button children
$("#chat").on("click", ".conversation_button", function() {
    // Hide currently active conversation
    $active_conversation.hide();
    $active_conversation.siblings('.conversation_button').removeClass("selected");

    // Set as currently active conversation button
    // Note: this refers to the clicked <div class="conversation_button">
    var $this = $(this);
    $active_conversation = $this.siblings('.conversation');

    // Show this conversation
    $active_conversation.show();
    $this.removeClass("alert").addClass("selected");
});

这种方法的一些优点：

• 不同的会话不需要不同的课程。通过在$active_conversation中存储实际会话DOM元素（作为jQuery对象），可以在不进行任何额外处理的情况下识别对话。
• 您可以使用conversation添加和删除整个列表项，而无需分配新的事件处理程序。在上面的示例中，所有 .conversation_button元素的事件处理程序在#chat级别定义。有关此绑定机制的更多信息，请阅读.on（或.delegate以获取1.7之前的版本）。

在这里，有一个updated fiddle！ ： - ）

Answer 2

如果你说的都是真的（错误发生了），那么唯一可以做到这一点的是另一个事件处理程序，它在使用stopPropagation()或return false;之前接收你的事件

可以执行的快速检查是将onclick替换为onmousedown或onmouseup，并查看您的警报是否可见。