Assign ajax html response content which include "id" can not be trigger?

Question

I use the Viusal Studio 2015 and IE Browser to debug 。

First I click the hyperlink "AAA"，the trace debug enter the function '$("#HrefBtn_1").click(function ()' successfully

，and then ajax html response the "BBB" to assign to the $('#formDefault_2')。

,and then I click the hyperlink "BBB"， the trace debug can not enter the function '$("#HrefBtn_2").click(function ()'

Default1.aspx=>

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default1.aspx.cs"     Inherits="Default1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">

<script src="js/jquery-2.1.4.min.js"></script>

<script>
  $(function() {


      $("#HrefBtn_1").click(function () {


          $.ajax({
              url: 'Default1.aspx/GetDataTest',
              type: 'POST',
              data: JSON.stringify(),
              contentType: 'application/json; charset=UTF-8',
              dataType: "json",      
              error: function (xhr) {
               },
              success: function (SuccessReturnVaule) {

                  var lsHTML;
                  lsHTML = "<a href='#' id='HrefBtn_2' rel='example'>BBB</a>";
                  $('#formDefault_2').html(lsHTML);
                  //$('#formDefault_2').append(lsHTML);
              }

          });



      });

      $("#HrefBtn_2").click(function () {

          var lsTemp;
          lsTemp = "Here!";

      });




   });

</script>     

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

         <div id="formDefault_1">
             <a href="#" id="HrefBtn_1" rel="example">AAA</a> 
         </div>

         <div id="formDefault_2">

         </div>


    </div>
    </form>
</body>
</html>


Default1.aspx.cs=>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;
using System.Collections;

public partial class Default1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [WebMethod]
    public static string GetDataTest()
    {      
        return "";
    }


}

Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — epascarello, Jul 14 '18 at 02:21

score 1 · Accepted Answer · answered Jul 14 '18 at 02:10

1

The reason is that the hyperlink added inside `` is dynamically added,so your click function will not work,you need to use on() instead:

$("#formDefault_2").on("click","#HrefBtn_2",function () {
      var lsTemp = "Here!";
});

answered Jul 14 '18 at 02:10

flyingfox

13,414
3
24
39

score 1 · Answer 2 · answered Jul 14 '18 at 02:20

The reason for the click not being triggered is, the element #HrefBtn_2 added dynamically. So you should use on event to bind the click for the dynamically added dom or else you can bind the click event after the element is rendered into the html like below.

I have added a function as bindButtonClick which i will trigger after the html is appended to the page which will bind the click actions.

$(function() {
  $("#HrefBtn_1").click(function () {
    $.ajax({
      url: 'Default1.aspx/GetDataTest',
      type: 'POST',
      data: JSON.stringify(),
      contentType: 'application/json; charset=UTF-8',
      dataType: "json",      
      error: function (xhr) {
      },
      success: function (SuccessReturnVaule) {
          var lsHTML;
          lsHTML = "<a href='#' id='HrefBtn_2' rel='example'>BBB</a>";
          $('#formDefault_2').html(lsHTML);
          //$('#formDefault_2').append(lsHTML);
          bindButtonClick();
      }
   });
  });
  function bindButtonClick() {
    $("#HrefBtn_2").click(function () {
        var lsTemp;
      lsTemp = "Here!";
    });
  }
});

Assign ajax html response content which include "id" can not be trigger?

2 Answers2