在json中嵌套ajax帖子答案

【问题标题】：nesting ajax post in json get在json中嵌套ajax帖子
【发布时间】：2017-02-02 16:13:12
【问题描述】：

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) {

        }
    });
});

【问题讨论】：

Event binding on dynamically created elements?的可能重复
val(...) 调用应该在 div 包装器上做什么？
if...else if ... 部分仅用于在 id 中添加 2？
each 循环添加元素，可能带有重复的ids

标签： javascript jquery json ajax

【解决方案1】：

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

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

.append('<div id="imagewrap"><img class="infobutton" src="/Content/information%20icon.png" /></div>')

$(document).on("click",".infobutton",function () {
  $.ajax({
    ...
  });
});

【讨论】：

试过这个，但是当我检查方法setID中的id值时，它显示id为null
“检查方法 setID 中 id 的值”——这是什么意思？

【解决方案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); });

【讨论】：