javascript - jquery：单击按钮时未收到回调

Question

我需要在单击按钮时发送请求，但在触发按钮的单击事件时未收到回调。以下是代码片段：

$(document).ready(function () {
    var counter = 0;
    $("#trail").click(function () {
        $("#dialog").dialog();
        if (counter < 1) {
            $("#searchboxdiv").after('<input type="text" id="searchbox">');
            $("#searchbox").after('<input type="button" id="searchbutton" value="search">');
            counter++;
        }
    });
    $("#searchbutton").click(function () {
        var dataToSend = null;
        $.ajax({
            data: dataToSend,
            url: "FormHandler",
            success: function (result) {},
            beforeSend: function () {
                dataToSend = $("#searchbox").val();
            }
        });
    });
    $("#searchboxdiv").on('click', "#searchbutton", function(){
        var data = null;

    });
});

我在对话框中动态添加了文本框，在单击对话框中的按钮时，未收到回调

Answer 1

使用事件委托（用于动态添加#searchbutton）

 $('#searchboxdiv').on('click',"#searchbutton",function(){

• http://learn.jquery.com/events/event-delegation/

Answer 2

您的选择：

• 使用事件委托。像这样将点击绑定到直接静态父级：

   $("#searchboxdiv").on('click', "#searchbutton", function(){ });
  

• 或者，将其绑定到文档。

   $(document).on('click', "#searchbutton", function(){ });
  

• 或者，将现有的单击移到 之后counter++;，即在 $("#trail")的单击处理程序内部。

有关详细信息，请参阅on()