在 JSON Get 中嵌套 ajax post

Question

function test() {
    $.getJSON("/Home/GetAp", function (result) {
        $.each(result, function () {
            if (this.is_disabled == "False") {
                var a = $("#MainDiv")
                            .append('<div id="imagewrap"><img id="infobutton" src="/Content/information%20icon.png" /></div>')
                            .val(this.id);
            } else if (this.is_disabled == "True") {
                var a = $("#MainDiv")
                            .append('<div id="imagewrap"><img id="infobutton2" src="/Content/information%20icon.png" /></div>')
                            .val(this.id);
            } else {
                return null;
            }
        })
    })
}

我将如何嵌套和 ajax 函数能够发布 a.val（），以便当用户单击任何 $（"#infobutton"） 时，他们将能够使用该按钮的 val，这将是特定于该按钮的 id

$("#infobutton").click(function () {
    $.ajax({
        type: "POST",
        contentType: 'application/json; charset=utf-8',
        url: "/Home/setID",
        data: JSON.stringify({ id: this.id }),
        success: function (result) {
        }
    });
});

Answer 1

不要让你的逻辑依赖于 DOM 元素的重复id，而是使用 class。

使用事件委派可以为事件注册时存在的元素以及稍后将创建的元素注册事件处理程序。

.append('<div id="imagewrap"><img class="infobutton" src="/Content/information%20icon.png" /></div>')
$(document).on("click",".infobutton",function () {
  $.ajax({
    ...
  });
});

Answer 2

无需嵌套 ajax 调用。只需确保单击事件绑定到附加的新元素，并在单击事件处理程序中获取 id。类似示例（没有 ajax 调用）

$(document).ready(function(){    
$(document).on('click', '.info', function(e) { alert("clicked div # " +  $(e.target).text()); });
setTimeout(function(){ $("#d1").append("<div class='info'>Click info 1.</div>"); }, 1000);
setTimeout(function(){ $("#d1").append("<div class='info'>Click info 2.</div>"); }, 2000);
setTimeout(function(){ $("#d1").append("<div class='info'>Click info 3.</div>"); }, 3000);
});
<div id="d1">
</div>

如果您需要更多详细信息或使用 ajax 调用的示例，请告诉我。

对于 id，您可以使用

$(document).on('click', '.info', function(e) { alert("clicked div # " +  e.target.id); });