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

Question

我目前有两个部分：一个交互式聊天，以及几个可以动态添加标签并再次将其删除的功能。 如您所料，我现在要合并它们，以便可以在每个选项卡中进行聊天。 我现在尝试的方法是将所有功能合并到一个脚本中，并在添加新标签后，只需追加运行聊天所需的textarea和session-div（以保存消息）。 问题是，当我按下send按钮时，它似乎没有调用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!!");
});

但是不幸的是没有警报弹出。 有人知道我该如何使用它吗？ 欢迎所有提示！

（我粘贴的完整代码就在这里 ）

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

因此，我现在从如下所示的on（“ click”内调用sendMessage。尽管它现在确实显示了“ BEHOLD，我还活着！”以及“ 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

这是一个授权问题。 尝试将事件处理程序分配给该按钮时，该按钮不存在。 有两种方法可以处理此问题。 在添加代码之后，您可以将click事件处理程序分配移至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发送，而不是先转换。 让我们知道您如何处理。

Answer 2

这里有用的术语是事件委托和冒泡 。 您不能将事件侦听器附加到尚不存在的元素上，但是可以将侦听器附加到父元素上，以便在将新元素添加到DOM时事件冒泡。

在这种情况下，您可能#pageTab使用#pageTab而不是document 。

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

Answer 3

#sendButton是动态创建的，因此您甚至需要使用委托。 将click事件附加到'#pageTab' ，然后将其分配给#sendButton 。 基本上，将click事件绑定到该元素时该元素不存在

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

Answer 4

您必须将事件响应添加到父级，例如：

$("#pageTab").click( "#sendButton", function(){ ... } )};

创建事件响应时，没有任何按钮都没关系。 在您的示例中，如果没有任何按钮，则该函数与事件不关联。