Question

我正在尝试传递

的id

var aid = post.id;

到消息容器，当单击onClick时，页面应该警告辅助值。其他记录正在正确显示。然而，这里的问题是它说援助是不确定的。我该如何解决这个问题？

var message_container = '<div class=\"new-update clearfix\"><div class=\"update-done\"></br> </div> <a onClick="reject('+ aid + ');" id="aid" class=\"tip\" ><i style=\"font-size: 2em; float:right\"  class=\"icon-remove\"></i></a> </br></br> </div>';
        $.ajax({
        url : '/test/back-api/admin/announcements',
        method : 'GET',
        success : function(d) {
            if (d.result) {
                var posts = d.data;
                for (var i = 0; i < posts.length; i++) {
                    var post = posts[i];
                    var aid = post.id;
                    //message.find('#aid').append("href", post.id);
                    $("#announcement-container").prepend(message);
                }
            } else {
                $('#announcement-container').append("<div> Nothing to show. </div>");
            }
        }
});
var reject = function(aid){
     $.ajax({
     url: app.api + "admin/transaction/remove/"+aid,
     type: 'post',
     success: function(d){
       alert(aid);
     }
})

Answer 1

如果在aid - 属性样式事件处理程序中使用onxyx，则它必须是全局的。这是不使用它们的众多原因之一。

相反，将事件处理程序与现代处理挂钩，将aid作为data-*属性存储在链接上，并在reject中检索它：

// *** Removed `onClick` and `id="aid"` from this string
var message_container = '<div class=\"new-update clearfix\"><div class=\"update-done\"></br> </div> <a class=\"tip\" ><i style=\"font-size: 2em; float:right\"  class=\"icon-remove\">remove link</i></a> </br></br> </div>';
$.ajax({
    url : '/test/back-api/admin/announcements',
    method : 'GET',
    success : function(d) {
        if (d.result) {
            var posts = d.data;
            for (var i = 0; i < posts.length; i++) {
                var post = posts[i];
                var aid = post.id;
                //message.find('#aid').append("href", post.id);
                // *** Hook it up and prepend it
                $(message_container)               
                    .find("a.tip")
                        .attr("data-aid", aid)
                        .on("click", reject)
                        .end()
                    .prependTo("#announcement-container");
                // *** End of added bit
            }
        } else {
            $('#announcement-container').append("<div> Nothing to show. </div>");
        }
    }
});
function reject() {
    var aid = this.getAttribute("data-aid"); // *** Get the aid from the element
    alert("reject aid = " + aid);
}

请注意，我从字符串中删除了id="aid"。您不能在多个元素上使用相同的ID。

实例：

＆＃13;

// *** Removed `onClick` and `id="aid"` from this string
var message_container = '<div class=\"new-update clearfix\"><div class=\"update-done\"></br> </div> <a class=\"tip\" ><i style=\"font-size: 2em; float:right\"  class=\"icon-remove\">remove link</i></a> </br></br> </div>';
fakeAjax({
    url : '/test/back-api/admin/announcements',
    method : 'GET',
    success : function(d) {
        if (d.result) {
            var posts = d.data;
            for (var i = 0; i < posts.length; i++) {
                var post = posts[i];
                var aid = post.id;
                //message.find('#aid').append("href", post.id);
                // *** Hook it up and prepend it
                $(message_container)               
                    .find("a.tip")
                        .attr("data-aid", aid)
                        .on("click", reject)
                        .end()
                    .prependTo("#announcement-container");
                // *** End of added bit
            }
        } else {
            $('#announcement-container').append("<div> Nothing to show. </div>");
        }
    }
});
function reject() {
    var aid = this.getAttribute("data-aid"); // *** Get the aid from the element
    alert("reject aid = " + aid);
}
function fakeAjax(options) {
    setTimeout(function() {
        options.success({
            result: true,
            data: [
                {id: 1},
                {id: 2},
                {id: 3}
            ]
        });
    }, 300);
}

＆＃13;

<div id="announcement-container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

如果您不想更改reject，只需更改处理程序：

.on("click", reject)

到

.on("click", reject.bind(null, aid))

并将其余部分保持不变。

Answer 2

var message_container = $('<div class=\"new-update clearfix\"><div class=\"update-done\"></br> </div> <a onClick="reject('+ aid + ');" id="aid" class=\"tip\" ><i style=\"font-size: 2em; float:right\"  class=\"icon-remove\"></i></a> </br></br> </div>');
$.ajax({
    url : '/test/back-api/admin/announcements',
    method : 'GET',
    success : function(d) {
        if (d.result) {
            var posts = d.data;
            for (var i = 0; i < posts.length; i++) {
                var post = posts[i];
                $(message_container).find('#aid').attr("onClick", "reject('"+ post.id + "')");
                $("#announcement-container").prepend($(message_container).clone(true));
            }
        } else {
            $('#announcement-container').append("<div> Nothing to show. </div>");
        }
    }
});
var reject = function(aid){
     $.ajax({
         url: app.api + "admin/transaction/remove/"+aid,
         type: 'post',
         success: function(d){
           alert(aid);
         }
    });
}

请参阅更新后的答案。

使用onclick

2 个答案: