Get Text of clicked link from a function

Question

I want to start off by saying I'm not an expert, maybe not even an intermediate, user of jQuery and any and all help is appreciated.

Here is a simulation of my little problem:

https://jsfiddle.net/c897enhy/

<a id="someRandomID_hypNotifSentTo_0" class="NotifSent2" href = "#">
    this is the text i want to get
</a>
<br>
<a id="someRandomID_hypNotifSentTo_0" class="NotifSent2" href = "#">
    this is the text i want to get 2
</a>
<br>
<a id="someRandomID_hypNotifSentTo_0" class="NotifSent2" href = "#">
    this is the text i want to get 3
</a>


if ($) {
    $(document).ready(function () {

        $("a[id*='_hypNotifSentTo_']").live("click", function ($e) {

            // Will post list of recipients to be removed from the file
            var x = $(this).text();
            alert(x);
            AjaxSuccessPopulateRecipients("restult");
        });

         function AjaxSuccessPopulateRecipients(result) {
             alert("asdf");
             var x = $('#NotifSent2').toString();
             alert(x);
             var x = $(this).text();
             alert(x);

             var recipients = $(this).text();
             alert("1");
             var recipientArr = recipients.split(',');
         }
       });
}

While, I am able to get the text of the active link from the "click" event, I am unable to do so from my second function.

The way the application works, is that the first function call ajax c# file, which then returns a success into the second jquery function with some results from c#.

I need to compare the results that are returned from the c# to what is inside the clicked hyperlink, but am unable to get the clicked text from within that "AjaxSuccess" function.

Answer 1

You're losing the the context of $(this) when you're in the Ajax function ($(this) will no longer refer to the clicked link). Try adding a variable that you can store the context in, like so:

$(document).ready(function () {
var $that;
        $("a[id*='_hypNotifSentTo_']").live("click", function ($e) {

            // Will post list of recipients to be removed from the file
            $that = $(this);
 var x = $that.text();
            alert(x);
            AjaxSuccessPopulateRecipients("restult");
        });

         function AjaxSuccessPopulateRecipients(result) {
alert("asdf");
             //var x = $('#NotifSent2').toString();
              //alert(x);
            var x = $that.text();
            alert(x);

            var recipients = $(this).text();
            alert("1");
            var recipientArr = recipients.split(',');
         }
       });

Answer 2

$(this) inside the AjaxSuccessPopulateRecipients refers to the Widow object and not the anchor tag that was clicked.

Just send the reference of anchor tag from click event to the second function like this

AjaxSuccessPopulateRecipients("restult", $(this));

Use it as context like this

function AjaxSuccessPopulateRecipients(result, context) { // <--- context refers to the anchor tag
  alert("asdf");
  var x = $('.NotifSent2').text();
  alert(x);
  var x = context.text();
  alert(x);
  var recipients = context.text();
  alert("1");
  var recipientArr = recipients.split(',');
}

Answer 3

Take a look at Function.prototype.call() .

The call() method calls a function with a given this value and arguments provided individually.

Change:

AjaxSuccessPopulateRecipients("restult");

To:

AjaxSuccessPopulateRecipients.call(this, "restult");

Doing so will pass the correct this value to your function.

Answer 4

You should not able to access data via this $('#NotifSent2') selector as the # selector is JQuery syntax for finding an ID on the page, whereas your elements are constructed with class="NotifSent2" .

If you wish to access a variable from a different function, you must ensure that the variable is within the correct scope.

Since your AJAX call and AjaxSuccessPopulateRecipients() function are within the same scope, you do not have access to $(this) across the two.

Simply pass the variable you wish to use to your function, as $(this) AjaxSuccessPopulateRecipients("restult", $(this));