jQuery-如何附加动态href和使用onclick？

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>

“ for”循环应该创建带有用户名的超链接列表，我希望每当单击链接时，“ click”侦听器都将“捕获”它，并在其中执行我的操作。我尝试了几件事：当我在“ for”循环中添加链接时，如下所示：

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

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

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

因为我希望它转到我创建的“点击”侦听器函数，所以它什么都不做...我想也许这可能是“点击”侦听器函数的错，所以我在html文件中添加了：

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

而且效果很好！ 所以我迷路了...我的append或href是什么问题？ 提前致谢！

Answer 1

有两个问题：

1. 使用class="users"而不是id="users"因为id是指定给一个元素而不是一组元素的。

2. 您正在准备文档时初始化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 =“ users”。 尝试用您的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代替类是错误的），因此我尝试查找该主题并发现以下问题：

jQuery onclick无法在动态插入的HTML元素上触发吗？

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