Question

我在网页中有一些静态DOM。我试图动态地将属性添加到现有dom的某些元素并插入到某个位置。这就是我到目前为止所尝试的。

   $.ajax({
         type:"GET",
         async: false,
         url:contextpath+"/phase/data/getData",
         data:postData,
         success: function (msg) {
               // msg ='<div class="row-sml">
                //            <div class="col col-xs-12 text-right plr30 mb8 displayhide">
               //               <button  type="button" class="btn btn-light-grey cus-btn mt10 rephrase-btn" id="submit-problem-phrase-button">Submit</button>
              //              </div>';
                $(msg).find('#submit-problem-phrase-button').attr('data',wikiTopicId);
                $('#insertHere').html(msg);
         },
         error:function (xhr, ajaxOptions, thrownError){
             $('.loader02,#overlay-bg,.trans-overlay').hide();
         } 
         });

但它不起作用

Answer 1

首先，您必须附加html代码。然后更改data Attribute 简单改变顺序

 $('#insertHere').html(msg);
 $(msg).find('#submit-problem-phrase-button').attr('data', wikiTopicId);

像这样

$.ajax({
  type: "GET",
  async: false,
  url: contextpath + "/phase/data/getData",
  data: postData,
  success: function(msg) {
    msg = '<div class="row-sml"> <div class="col col-xs-12 text-right plr30 mb8 displayhide"><button type="button"  class="btn btn-light-grey cus-btn mt10 rephrase-btn" id="submit-problem-phrase-button"> Submit</button> </div > ';
    $('#insertHere').html(msg);
    $(msg).find('#submit-problem-phrase-button').attr('data', wikiTopicId);

  },
  error: function(xhr, ajaxOptions, thrownError) {
    $('.loader02,#overlay-bg,.trans-overlay').hide();
  }
});

Answer 2

你的行

$(msg).find('#submit-problem-phrase-button').attr('data',wikiTopicId);

...将解析HTML，在该解析的HTML中找到该元素，并添加一个属性toit - 然后抛弃所有这些。然后这一行：

$('#insertHere').html(msg);

重新解析HTML并将其插入。

相反，插入它，然后更新：

$('#insertHere').html(msg);
$('#submit-problem-phrase-button').attr('data',wikiTopicId);

请注意，我没有使用find。 ID 必须唯一，因此我们只能使用$("#...")。

附注：data是无效的HTML属性名称。您可以使用以data-开头的任何内容，但data本身无效。

如何在Ajax Call的scuccess中添加数据属性

2 个答案: