Question

我从论坛中读到的内容中总结了许多内容，这是我到目前为止的内容：

$(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
    });
});

// performUsernameAjax函数的一部分

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>

＆＃34; for＆＃34; loop应该创建一个带有用户名的超链接列表，我希望每当点击一个链接时，点击＆＃34;点击＆＃34;听众会＆＃34;赶上＆＃34;它会做我在那里做的任何事情..但它没有用，所以我做了几件事：当我在＆＃34; for＆＃34;中添加一个链接时这样循环：

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

链接本身工作正常 - 它重定向到谷歌页面，但当我这样做时：

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

因为我希望它转到＆＃34;点击＆＃34;我创建的听众功能，它什么都不做...... 我想也许可能是＆＃34;点击＆＃34;监听器功能的故障所以我在html文件中添加了：

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

它完美无缺！所以我只是输了...我的追加或我的href有什么问题？提前致谢！

Answer 1

有两个问题：

使用class="users"代替id="users"，因为id指定给一个元素而不是一组元素。

您正在准备文档初始化onClick函数。你必须将它移动到一个单独的函数并在DOM就绪（如果启动时有链接）调用它，并将其称为Ajax回调函数（以便对最近创建的链接生效）

$(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
});

以及稍后在你的ajax函数中，再次调用该函数：

   $.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();
    }

})

Answer 2

您不能使用id =＆＃34;用户＆＃34;在文档中多次出现一次。尝试使用var i增加你的id。

而不是

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

尝试

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

更改此

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

使用

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

Answer 3

与@Ali一样，提到使用class代替id。代码应该像

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

此外，对于事件处理程序问题，单击处理程序将不会对未来的元素起作用，即在DOM准备好之后新添加的元素。我们在这里使用了委托理念

替换现有代码

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

与

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

此处点击已使用on方法委派。

注意： on方法适用于jQuery 1.7+版本。

希望这能解决您的要求！

Answer 4

谢谢大家！你是正确的，我正在初始化onClick函数准备文件，这就是为什么它不起作用..（我也错了使用id而不是类）所以我试着查找该主题并发现这个问题：< / p>

jQuery onclick not firing on dynamically inserted HTML elements?

我用#wrapper做了回答，解决了我的问题！那谢谢啦！

JQuery - 如何附加动态href并使用onclick？

4 个答案: