JQuery - how to append a dynamic href and use onclick?

Question

I combined many things from what I read in forums and here is what I got so far:

$(document).ready(function () {
    $('input[name=key]').keyup(performUsernameAjax).focusin(performUsernameAjax);
    $('#users').click(function (event) {
        console.log('hello');
        event.preventDefault();
        console.log($(this).text());
        var dataStr = {
            'username': $(this).text(),
            'method': 'userdata'
        };
        var base_url = '<?= base_url() ?>';
        var url = base_url + 'login/userdata';
        console.log(url);
        $.ajax({
            type: 'POST',
            data: dataStr,
            dataType: 'json',
            url: url,
            success: function (data) {
                $("#userInfo").append("<p><ul><h3> " + data.username + "'s Info:</h3>");

                $("#userInfo").append('<li> The username: ' + data.username + '</li>');
                $("#userInfo").append('<li> The full name: ' + data.fullname + '</li>');
                $("#userInfo").append('<li> The num of failed logins: ' + data.failedlogin + '</li>');

                $("#userInfo").append('</ul></p>');
            }
        });
        return false; //for good measure
    });
});

//part of the performUsernameAjax function

for (var i = 0; i < data.length; i++) {
   console.log(data[i].username);
   $("#usernameList").append("<p><a href='#' id='users'>" + data[i].username + "</a></p>");
}

HTML :

<div class="field-info" id="usernameList"> </div>
<br>
<p><div class="field-info" id="userInfo"> </div></p>
<p><a href="#" id="users">rotemel</a></p>

The "for" loop is supposed to create a list of hyperlinks with usernames and I want that whenever a link is clicked the "click" listener will "catch" it and will do whatever I do there.. But it doesn't work so I tried few things: when I append a link in the "for" loop like that:

$("#usernameList").append("<p><a href='http://www.google.com' id='users'>" +
                            data[i].username + "</a></p>");

the link itself works fine - it redirects to the google page but when I do this:

$("#usernameList").append("<p><a href='#' id='users'>" +
                            data[i].username + "</a></p>");

because I want it to go to the "click" listener function that I've created, it does nothing... I thought perhaps that it might be the "click" listener function's fault so I added in the html file:

<p><a href="#" id="users">rotemel</a></p>

and it worked perfectly! So I'm just lost... what is the problem with my append or my href?? Thanks in advance!

Are you calling a function from ancor tag. Like – Mickey Patel Jun 04 '16 at 14:00 — Mickey Patel, Jun 04 '16 at 14:00

Ali Sheikhpour · Answer 1 · 2016-06-04T17:40:38.350

There are two problems:

use class="users" instead of id="users" as the id is specified to one elemnt not a group of elements.

You are initializing onClick function on document ready. You have to move it to a separate function and call it both on DOM ready (if there are links at start) and also call it as Ajax callback function (To make effect on recently created links)

$(document).ready(function () {
$('input[name=key]').keyup(performUsernameAjax).focusin(performUsernameAjax);
initializeOnClick(); 
});

function initializeOnClick(){

  //Change #users to .users
  $('.users').click(function (event) {
    console.log('hello');
    event.preventDefault();
    console.log($(this).text());
    var dataStr = {
        'username': $(this).text(),
        'method': 'userdata'
    };
    var base_url = '<?= base_url() ?>';
    var url = base_url + 'login/userdata';
    console.log(url);
    $.ajax({
        type: 'POST',
        data: dataStr,
        dataType: 'json',
        url: url,
        success: function (data) {
            $("#userInfo").append("<p><ul><h3> " + data.username + "'s Info:</h3>");

            $("#userInfo").append('<li> The username: ' + data.username + '</li>');
            $("#userInfo").append('<li> The full name: ' + data.fullname + '</li>');
            $("#userInfo").append('<li> The num of failed logins: ' + data.failedlogin + '</li>');

            $("#userInfo").append('</ul></p>');
        }
    });
    return false; //for good measure
});

and later in your ajax function, again call that function:

   $.ajax({
   //blah blah

   ,success: function(result){
        //Your loop
        $("#usernameList").append("<p><a href='http://www.google.com' class='users'>" +data[i].username + "</a></p>");
        //End of loop

        //setup onclick on recently added items:
        initializeOnClick();
    }

})

Please check edited answer specialy inline java script comments — Ali Sheikhpour, Jun 04 '16 at 17:18

Mickey Patel · Answer 2 · 2016-06-04T14:10:37.480

0

You can't take id="users" more then one time in a document. try to increment your id with your var i.

Instead of

$('#users').click(function (event) {
}

Try

<a href="javascript:void callMe(cnt);" .. > </a>

change this

var dataStr = {
        'username': $(this).text(),
        'method': 'userdata'
};

With

var dataStr = {
        'username': $('#users'+cnt).text(),
        'method': 'userdata'
};

edited Jun 04 '16 at 14:10

answered Jun 04 '16 at 14:05

Mickey Patel

501
1
4
16

score 0 · Answer 3 · answered Jun 04 '16 at 14:21

0

Like @Ali mentioned use class instead of id. The code should be like

$("#usernameList").append("<p><a href='#' class='users'>" +
                        data[i].username + "</a></p>");

Also, for event handler issue, the click handler will not work on future elements i.e., newly appended elements after the DOM was ready. We have use delegate concept here

Replace the existing code

$('#users').click(function (event) {

with

$("#usernameList").on('click', '.users', function(event) {

Here the click has been delegated using on method.

Note: on method works with jQuery 1.7+ versions.

Hope this solves your requirement!

answered Jun 04 '16 at 14:21

dinesh

342
2
13

but the line $("#usernameList").on('click', '.users', function(event) { still comes inside the "ready" section.. so what does it matter? and I've tried what you said and unfortunately it doesn't work.. :( – Rotem Elharar Jun 04 '16 at 15:10
Though this delegate event is inside the ready section it will still listen to click event on the dynamically created elements. This is the same concept similar to that link where your solution was found. I believe `#usernameList` was a static element. Anyhow I'm glad that you found your solution. – dinesh Jun 04 '16 at 16:04

score 0 · Answer 4 · edited May 23 '17 at 12:08

So thank you everyone! You were right about the fact that I was initializing onClick function on document ready that's why it didn't work.. (Also I was wrong to use id instead of class) So I tried looking up about that subject and found this question:

jQuery onclick not firing on dynamically inserted HTML elements?

and I did what the answer there said with the #wrapper and that solved my problem! So thanks!

JQuery - how to append a dynamic href and use onclick?

4 Answers4