javascript - 如何使附加了javascript的html调用javascript函数？

Question

我目前有两个部分:交互式聊天和几个可以动态添加选项卡并再次删除选项卡的功能。正如您可能期望的那样，我现在想要合并它们，以便您可以在每个选项卡中进行聊天。我现在尝试的方法是将所有功能合并到一个脚本中，并在添加新选项卡时，只需附加运行聊天所需的 textarea 和对话 div(用于保存消息)。问题是，当我点击发送按钮时，它似乎没有调用函数 sendMessage()。

所以我动态添加html是这样的:

function addTab() {
    $('#pageTab').append(
        $('<li><a href="#usertab' + this.id + '">' + this.id +
            '<button class="close" type="button">×</button></a></li>'));
    $('#pageTabContent').append($('<div class="tab-pane" id="usertab' + this.id 
        +'"><form id="send_message_form"><textarea id="messageText" rows="1" cols="25"></textarea></br>'
        + '<input type="button" id="sendButton" value="Send Message"></form>'
        + '<div class="conversation"></div></div>'));
    $('#page' + this.id).tab('show');
}

我简化了点击操作，而不是 sendMessage，如下所示:

$("#sendButton").click(function(){
    alert("BEHOLD, I AM ALIVE!!");
});

但不幸的是没有弹出警报。有谁知道我怎样才能让它发挥作用？欢迎所有提示!

(我拥有的完整代码的粘贴是 right here )

[编辑] 谢谢您的帮助!我现在确实可以显示警报按钮。奇怪的是，当我随后从该函数中调用另一个函数以将消息发布到服务器时，它什么也不做。

所以我现在从 on("click"中调用 sendMessage，如下所示。尽管它现在确实显示了“BEHOLD，I AM ALIVE!!” 以及 “BEHOLD，我们在 sendMessage 中。”，Firebug 显示它不执行 POST，即使我在它起作用的另一个页面(没有选项卡)中使用了这条完全相同的消息。任何想法有什么问题吗？那么这个呢？

function sendMessage(message, user_id) {
    alert("BEHOLD, We're in the sendMessage.");
    $.ajax({
        type: "POST",
        contentType: "application/json",
        accepts: "application/json; charset=utf-8",
        url: "/api/support/" + "1",
        data: JSON.stringify({
            'action': 'ADD_MESSAGE',
            'user_id': user_id,
            'message': message
        }),
        dataType: "json",
        success: function(data) {
            alert("BEHOLD, I have posted!!");
            updateConversation();
        }
    });
}

$(".container").on("click", "#sendButton", function() {
    alert("BEHOLD, I AM ALIVE!!");
    var text = $("#messageText").val(); // Get the text
    sendMessage(text, 1);
});

Answer 1

这是一个授权问题。当您尝试向其分配事件处理程序时，该按钮不存在。有两种方法可以处理这个问题。您可以在附加代码后将点击事件处理程序分配移至 addTab() 函数，也可以将其更改为这样...

$("#pageTab").on("click", "#sendButton", function(){
    alert("BEHOLD, I AM ALIVE!!");
});

我建议查看 .on() 的文档...

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

编辑:

至于您的数据发布问题，请尝试将代码更改为这样...

$.ajax({
    type: "POST",
    contentType: "application/json",
    accepts: "application/json; charset=utf-8",
    url: "/api/support/1",
    data: {
        action: 'ADD_MESSAGE',
        user_id: user_id,
        message: message
    },
    dataType: "json",
    success: function(data) {
        alert("BEHOLD, I have posted!!");
        updateConversation();
    }
});

唯一显着的区别是它允许 jQuery 将数据作为 JSON 发送，而不是先转换它。让我们知道您的进展如何。