Question

让我用一个例子来说明这个

<div class="main_div">
    <div class="moday">
    </div>
    <button class="add_main">Add</button>
</div>

我们绑定了类add_main，单击添加按钮时函数体执行如下所示

$.ajax({
  type: "POST",
  url : "url",
  dataType : 'json',
  data : { 
    'param1'      : "param1value"
  },
  beforeSend: function(jqXHR , settings ){},
  success: function(response){
     // the response is json object.
     $(this).closest('.main_div').html('<div class="inner_data_section"></div>');
     // I have to assign the response data (that is json object ) to inner_data_seciton.
$(this).closest('.main_div').find('inner_data_section').data('data1',response);
  },
  complete: function(jqXHR , settings){}
});

问题

AS“inner_data_section”稍后添加到div“main_div”。 this.closest.find无法指向inner_data_section，这就是数据也没有绑定到它的原因。

**我的搜索**

我已经搜索并找到了我们将数据分配为data-data1 =“some value”的解决方案。我这样做也可以在以后访问。

但在我们的例子中，我们必须将json对象（复数值）分配给内部div，data-data1 =“some value”仅适用于简单值。

我认为我在获取jquery选择器指针json响应中新添加的html时遇到了问题。

如何应对这个问题？只提示不完整的解决方案。

Answer 1

jQuery ajax回调中{ personal_info: { address: { city: 'Missing field', country: 'Missing field', } } }的默认上下文是jQXhr对象。
所以试图找到它的DOM祖先会失败要将其设置为您想要的任何内容，请使用context参数。

修改

还有inner_data_section，它没有类选择器this（RRK）

Answer 2

我没有计划你为什么要在元素数据中加入json objet，但这里有一个例子。它绝对不干净但应该有效

$.ajax({
type: "POST",
url : "url",
dataType : 'json',
context: your_div, //<-- here
data : { 
    'param1': "param1value"
},
beforeSend: function(jqXHR , settings ){},
success: (response) => {
    // the response is json object.
    $(this).closest('.main_div').html('<div class="inner_data_section"></div>');
    // I have to assign the response data (that is json object ) to inner_data_seciton.
    Object.keys(respone).forEach(key => $(this).closest('.main_div').find('.inner_data_section').data(key, response[key]));
},
complete: function(jqXHR , settings){}
});

您只需为回复的每个键创建数据属性

Answer 3

正如您已经发现的那样，DOM 不是复杂数据的位置。有几种方法可以破解它（例如，Richard Fox的建议，但你最好重新考虑你的方法。考虑某种数据存储：

const STORE = {
  data: null
};

function storeData(data){
  STORE.data = data;
}

$.ajax({
  method: 'POST,
  // ..etc
  success: storeData
});

从这里开始，你可以弄清楚如何在某种渲染方法中使用数据。

附加新的html时JQuery数据绑定

3 个答案: