JQuery Append html5

Question

I have a matrix of tags <a href="">, generated by this code in JQuery:

function makeList(){
    var listContainer = $("#matrix");
    for(i=0; i<10; ++i){
        listContainer.append( $("<nav><ul> <li><a href="">v1</li> 
            <li><a href="">v2</li> <li><a href="">v3</li> 
            <li><a href="">v4</li>"));
        console.log("adding...");
    } 
}

Now I have 40 <a href=""> links, and a user click one of them. I need to access to this very <a href=""> and make something to it.

How can I do it? Thank you

Nevin · Accepted Answer · 2015-03-16 12:22:55Z

2

As the elements are getting appended, initially the DOM won't have the elements. Use on event handler.

Syntax:

.on('event', 'selector', fn);

Plus using "this" keyword, you can fetch the element which you have just clicked.

 $("a").on("click",function(){
    console.log($(this).html());
 });

Have appended the elements required and added an event handler in the following fiddle.

answered Mar 16, 2015 at 12:22

Nevin

3,3682 gold badges29 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sergi Over a year ago

Thank you! But how can I save the clicked variable...? I mean, console.log ($(this).html()); is for debugging, but I need to take the variable clicked and make things to it, like change the font color or anything

Nevin Over a year ago

@Sergi Look up changing class via jquery. That's the best practice to change font color. "$(this) " contains the element that you need, hence use jquery to do whatever features you want. :)

Manik Arora · Accepted Answer · 2015-03-16 12:14:15Z

1

Try adding a class to the <a> tag and use the added class as selector for the click event and access the clicked tag using this pointer/reference.

See below example-

<a class="test" href="#">Test 1</a>
<a class="test" href="#">Test 2</a>
<a class="test" href="#">Test 3</a>
<a class="test" href="#">Test 4</a>

$('.test').on('click',function(){
alert($(this).text());
});

Working Fiddle- http://jsfiddle.net/pp8b7aec/

answered Mar 16, 2015 at 12:14

Manik Arora

4,8121 gold badge27 silver badges48 bronze badges

Comments

Jai · Accepted Answer · 2015-03-16 12:18:37Z

1

As you are appending the elements dynamically so you need to use event delegation syntax, because they were not in the dom when page loaded, so any event bound on dynamic elemetns won't be registered.

The syntax is:

$(staticParent).on('event', 'selector', fn);

so in your case you can do this:

$(function(){
    $("#matrix").on('click', 'nav a', function(e){ // register the event on static parent
        e.preventDefault();// stops the link to navigate
        alert(this.textContent); // alert the text written in the clicked link.
    });
});

in the code above you can even delegate to the $("#matrix"), $("body") or $(document).

answered Mar 16, 2015 at 12:18

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Comments

Colin Cline · Accepted Answer · 2017-12-12 01:21:03Z

1

Your question is not very clear to me.
If you want to identify which is clicked the following code snippets may help you.

$("a").on("click",function(){
    alert($(this).html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>

edited Dec 12, 2017 at 1:21

Colin Cline

1,2791 gold badge12 silver badges25 bronze badges

answered Mar 16, 2015 at 12:14

arshovon

13.7k9 gold badges54 silver badges72 bronze badges

Collectives™ on Stack Overflow

JQuery Append html5

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related