jquery - 使用 AJAX 交换的按钮会导致新按钮的侦听器被忽略

Question

我使用 AJAX 调用 PHP 脚本并用结果数据替换一些 HTML，以便用户可以确认数据。初始按钮是“获取数据”，然后我用 2 个新按钮“确认数据”和“重试”将其换掉（以防用户不想验证脚本结果。

被替换的 HTML 按钮：

<div class="btn-container" id="btn-container">
        <button type="button" id="fetch_btn" value="fetch_it" class="btn-btn btn btn-dark border-light center-button mt-2">
                <div class="btn-text">
                    Fetch Data
                </div>
        </button>
</div>

Ajax 工作得很好：

   $("#new_case_form").submit(function(e){
      e.preventDefault();
      var county_name = $("#county_select").val();
      var case_number = $("#case_num").val();
      // console.log($("#county_select").val());
      var the_url = "fetch_case.php?county="+county_name+"&case_number="+case_number;
      var response = $.ajax({
          url: the_url,
          type: "GET",
          dataType: "text",
          success: function(data){
              $("#case-confirm").html(data);
              $("#btn-container").html("<button type=\"button\" name=\"confirm_btn\" id=\"confirm_btn\" value=\"confirm\" class=\"btn-btn btn btn-dark border-light center-button mt-2\"><div class=\"btn-text\" id=\"confirm_btn_text\">Confirm Case</div></button><button type=\"button\" name=\"try_again\" id=\"try_again_btn\" value=\"try again\" class=\"btn-btn btn btn-dark border-light center-button mt-2\"><div class=\"btn-text\" id=\"try_again_btn_text\">Try Again</div></button>");
          }
      });
  });

以下是更易读格式的新 HTML：

<button type="button" name="confirm_btn" id="confirm_btn" value="confirm" class="btn-btn btn btn-dark border-light center-button mt-2">
    <div class="btn-text" id="confirm_btn_text">
        Confirm Case
    </div>
</button>
<button type="button" name="try_again" id="try_again_btn" value="try again" class="btn-btn btn btn-dark border-light center-button mt-2">
    <div class="btn-text" id="try_again_btn_text">
        Try Again
    </div>
</button>

这是我在单击“重试”按钮后尝试执行任何操作时使用的 jQuery：

  $("#try_again_btn").click(function(e){
      console.log('confirm btn clicked');
  });

我也试过

  $("#try_again_btn").on("click",function(e){
      console.log('confirm btn clicked');
  });

我还使用了#try_again_btn_text，因为我在其中嵌套了一个 HTML 标记，<button>并且认为当单击文本时它不会触发父级的触发器，button但这也不起作用。

标签： jquery