Hi i am trying to navigate through anchor link. Only the first link works. For example if i click a link in a page it goes to that link, but when there is another link in page whcih i have clicked it doesnt work. And also the second has the same class 1st link Please help.

 $('#frmDisplay').on('load', function () {
               $('#frmDisplay a.anchorLink').on('click', function () {
                     var id = $(this).attr('id');
                     var hid = document.getElementById('<%= HiddenField1.ClientID %>');
                     hid.value = id;
                     $.ajax({
                         type: "POST",
                         contentType: "application/json; charset=utf-8",
                         url: "Amm.aspx/getlink",
                         data: "{'Id': '"   id   "'}",
                         dataType: "json",
                         success: function (data) {
                             $('#frmDisplay').contents().find('html').html(data.d);
                         },
                         error: function (response) {
                             alert(response.responseText);
                         }
                     });
                 });
             });
 public static string getlink(int Id)
        {
            SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["connString"].ConnectionString);
            string link = "extlink";
            BookTree obj = new BookTree();
            DataSet ds = obj.getlink(Id);
            SqlCommand cmd=new SqlCommand("select vcFilePath from tblBookNodes where iModuleId='"   Id   "'",conn);
            conn.Open();
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read())
            {
                bytes = (byte[])dr["vcFilePath"];
            }
            string fileName = link.Replace(" ", "_")   ".htm";
            // DirectoryInfo strPath = new DirectoryInfo(HttpContext.Current.Server.MapPath(@"~/Linking/"));
            //string strPath = HttpContext.Current.Server.MapPath(@"/Linking/")   fileName;
            //foreach (FileInfo file in strPath.GetFiles())
            //{
            //  file.Delete();
            //}
            string path = Path.Combine(HttpContext.Current.Server.MapPath("~/htmlFile/"), fileName);
            var doc = new HtmlDocument();
            string html = Encoding.UTF8.GetString(bytes);
            doc.LoadHtml(html);
            StringWriter sw = new StringWriter();
            var hw = new HtmlTextWriter(sw);
            StreamWriter sWriter = new StreamWriter(path);
            sWriter.Write(sw.ToString());
            doc.Save(sWriter);
            sWriter.Close();
            //string fileContents = html;
            //System.IO.File.WriteAllText(path, html);
            return File.ReadAllText(path);
        } 

CodePudding user response：

You have to use "on" instead of find() and event listener attach. Please refer to this example:

$('#formDisplay a.anchroLink').on('click', function() {
  // TODO: handle the click
})

This is necessary because when you add the event listener the DOM is not yet ready to handle requests for non existing content. Using "on" you can attach an event to a class or a simple DOM query.

To be more clear I post your code with modifications based on my previous suggestion:

$('#frmDisplay a.anchorLink').on('click', function () {
  var id = $(this).attr('id');
  var hid = document.getElementById('<%= HiddenField1.ClientID %>');
  hid.value = id;
  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "Amm.aspx/getlink",
    data: "{'Id': '"   id   "'}",
    dataType: "json",
    success: function (data) {
      $('#frmDisplay').contents().find('html').html(data.d)
    },
    error: function (response) {
      alert(response.responseText);
    }
  });
});

My last answer (I don't know you were using iFrames):

function clickHandler() {
  var id = $(this).attr('id');
  var hid = document.getElementById('<%= HiddenField1.ClientID %>');
  hid.value = id;
  $.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "Amm.aspx/getlink",
    data: "{'Id': '"   id   "'}",
    dataType: "json",
    success: function (data) {                         
      $('#frmDisplay').contents().find('html').html(data.d);
      // You can reload the event handler because the prev one
      // has been lost after refreshing the page with the ajax call.
      $('#frmDisplay').contents()
        .find('a.anchorLink')
        .click(clickHandler);
    },
    error: function (response) {
      alert(response.responseText);
    }
  });
}
$('#frmDisplay').on('load', function () {
  $('#frmDisplay')
    .contents()
    .find('a.anchorLink')
    .on('click', clickHandler);
})