I have a functionality where i have anchor tags that generate dynamically. Now i have a next button which onclick would generate another anchor tag For eg : 8 if the last digit is 7.

For Eg:

<a id="a1" href="#">4</a>
<a id="a2" href="#">5</a>
<a id="a3" href="#">6</a>

I know by using the below code i can get the anchor value

 $('#a1').click(function () {
        alert($(this).text());
    });

On click of next button i append another:

<a id="a3" href="#">7</a>

But i have more than 100 anchor tags getting generated(Consider a paginator i keep clicking next button). I cant hardcode the functions for 100 anchor tags. Is there any approach or generic method that i can use to get values of anchor tag?

I have a functionality where i have anchor tags that generate dynamically. Now i have a next button which onclick would generate another anchor tag For eg : 8 if the last digit is 7.

For Eg:

<a id="a1" href="#">4</a>
<a id="a2" href="#">5</a>
<a id="a3" href="#">6</a>

I know by using the below code i can get the anchor value

 $('#a1').click(function () {
        alert($(this).text());
    });

On click of next button i append another:

<a id="a3" href="#">7</a>

But i have more than 100 anchor tags getting generated(Consider a paginator i keep clicking next button). I cant hardcode the functions for 100 anchor tags. Is there any approach or generic method that i can use to get values of anchor tag?

• javascript
• jquery
• anchor

• 1 Select by tag, or give them all a mon class. Also, you'll need to use a delegated event handler if you're appending the element dynamically – Rory McCrossan Commented Oct 24, 2016 at 10:03

5 Answers 5

Use Attribute Starts With Selector [name^=”value”] selector,

I would suggest to have mon class and select elements based on class-selector

$('[id^="a"]').click(function() {
  alert($(this).text());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a id="a1" href="#">4</a>
<a id="a2" href="#">5</a>
<a id="a3" href="#">6</a>

Using class-selector:

$('.a-elem').click(function() {
  alert($(this).text());
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<a id="a1" class="a-elem" href="#">4</a>
<a id="a2" class="a-elem" href="#">5</a>
<a id="a3" class="a-elem" href="#">6</a>

Note: You might want to consider Event delegation if elements are being appended dynamically

Currently what you are using is called a "direct" binding which will only attach to element that exist on the page at the time your code makes the event binding call.

You need to use Event Delegation using .on() delegated-events approach, when generating elements dynamically.

You should assign a mon class the use Class Selector (“.class”)

HTML

<a class="anchorLink" href="#">6</a>

Script

$(document).on('click', "a.anchorLink", function(){
    alert($(this).text())
});

In place of document you should use closest static container for better performace.

Iterate through all <a>, it's easy:

$('a').each(function() {
    $(this).on('click', function(e) {
         alert($(this).text());
    });
});

Try Like this.

<a class="yourclass" id="a1" href="#">4</a>
<a class="yourclass" id="a2" href="#">5</a>
<a class="yourclass" id="a3" href="#">6</a>

    $('.yourclass').click(function () {
            alert($(this).text());
        });

Try this

<a id="a1" href="#" value="4">4</a>

script:

var text=$(this).val()